1.创建request.js用于封装axios;
2.引入axios
import 'axios' from 'axios';
3.设置全局配置,创建一个axios的实例
// 创建axios实例
const service = axios.create({
// axios中请求配置有baseURL选项,表示请求URL公共部分
baseURL: 'http://xxxxxxxxxx',
// 超时
timeout: 10000
});
3.设置axios请求拦截
// request拦截器
service.interceptors.request.use(
config => {
let token = localStorage.getItem('token')
if (token) {
config.headers["Authorization"] = token; // 让每个请求携带自定义token 请根据实际情况自行修改
}
return config;
},
error => {
console.log(error);
Promise.reject(error);
}
);
最后一定要return config;
如果请求需要设置请求头,那么在请求拦截中配置;
4.设置axios响应拦截
// 响应拦截器
service.interceptors.response.use(
res => {
const code = res.data.code;
if (code === 401) {
return res.msg;
} else if (code == 400) {
return res.msg;
} else if (code >= 200 && code < 300) {
return res.data;
} else if (code == 500) {
return res.data;
} else {
return res;
}
},
error => {
console.log("error")
return Promise.reject(error);
}
);
根据请求返回的code,进行对应的msg提示或其他处理;
5.导出实例
export default service;
6.创建请求接口封装api.js
7.引入封装的axios请求文件
import request from "./request";
8.封装接口并导出
export function 方法名() {
return request({
url: "接口地址(除公共部分的内容)",
method: "接口请求方法"
});
}
9.在页面中调用
getUsre() {
let query = {
username:'aaa'
}
getuser(query).then(res=>{
//....resdosomething
})
}
//或者使用async await
async getUsre() {
let query = {
username:'aaa'
}
let res = await getuser(query);
//res...dosomething
}