axios只是一个基于promist用于浏览器和node.js的http客户端，他有以下的特征
从浏览器中创建 XMLHttpRequest
从 node.js 发出 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防止 CSRF/XSRF
axios安装
//在项目根目录打开cmd输入
npm i axios vue-axios
// 在main.js中引入
import axios from 'axios'; //引入axios
import VueAxios from 'vue-axios'; // 引入vue-axios
Vue.use(VueAxios,axios); //使用
vue中配置axios文件，封装axios请求
为了统一管理请求，每个项目都会去配置axios；而不是在vue中直接使用，那样不好维护等等
下面是我配置的最基础的axios文件
import axios from "axios";
import { Toast } from "mint-ui"; // 我用的mint的框架来弹出我的错误返回 大家可以用别的提示（移动端的组件库）
import router from "@/router/index.js";
// 默认超时设置
axios.defaults.timeout = 5000;
// 相对路径设置
axios.defaults.baseURL = "";
//http request 拦截器
axios.interceptors.request.use(
(config) => {
// 获取token
const token = localStorage.getItem("cc_token");
// 设置参数格式
if (!config.headers["Content-Type"]) {
config.headers = {
"Content-Type": "application/json",
// application/x-www-form-urlencoded
};
}
// 添加token到headers
if (token) {
config.headers.token = token;
}
// 鉴权参数设置
if (config.method === "get") {
//get请求下 参数在params中，其他请求在data中
config.params = config.params || {};
let json = JSON.parse(JSON.stringify(config.params));
//一些参数处理
} else {
config.data = config.data || {};
//一些参数处理
}
return config;
},
(err) => {
return Promise.reject(err);
}
);
//http response 拦截器
axios.interceptors.response.use(
(response) => {
//一些统一code的返回处理
if (response.data.code === 501) {
// 登录验证
//做了个示例跳转项目中登录，并记录下相对路径
router.push({
name: "login", //从哪个页面跳转
query: {
retUrl: window.location.href.split("#")[1] || "",
is_new_user_url: 1,
},
});
}
return response;
},
(error) => {
return Promise.reject(error);
}
);
export default axios
第二步：发送请求，再项目中请求接口基本上是按照业务或者功能划分的
我在src下新建api的文件夹, 然后新建一个login.js 文件，用来放关于登录的接口的
import request from "@/router/axios"; //引入封装的axios，也就是步骤一中的axios文件
//发送get请求
export const getLoginApi = (params) => {
return request({
url: "www.baidu.com",
method: "get",
params: { ...params }, //或者 写成 params，也是可以的 // params, 这是简写
});
};
//发送post请求 这个请求是404因为百度没有post这个接口
export const getLoginApi = (params) => {
return request({
url: "www.baidu.com",
method: "post",
data:params
});
};
第三步：在页面使用
import { getLoginApi } from "@/api/login"; //在对应的vue页面中，引入刚刚的请求接口 //就可以使用了
let params = {
cardId: 342511635445,
code: 666666,
};
getLoginApi(params).then((res) => {
console.log(res, "----------");
});
