一、原因
像是在一些业务逻辑上，比如需要在请求之前展示loading效果，或者在登录的时候判断身份信息（token）等信息有没有过期，再者根据服务器响应回来的code码进行相应的提示信息。等等在请求之前，之后做的一些逻辑，都可以通过二次封装axios请求，进行实现。
二、具体的封装
这里是对axios封装的一种形式，有多种形式，具体要根据具体业务需求去定。具体代码里面有具体注释。不再啰嗦，直接上具体代码吧，供参考！
// axios的封装
import axios, { HttpStatusCode } from "axios";
import { useRouter } from "vue-router";
// 生产环境
const baseURLProd = "https://mall.quanrui.cc/api/v1/backend/";
// 测试环境
const baseURLDev = "http://139.9.197.13:8088/api/v1/backend/";
const baseURL = baseURLDev; //更改baseurl
// 使用路由
const router = useRouter();
// 设置请求头
axios.defaults.headers.post["Content-Type"] =
"application/x-www-form-urlencoded;charset=UTF-8";
// 创建axios示实例
let instance = axios.create({
baseURL: baseURL, //设置baseurl
timeout: 5000, //超时时间
});
// 跳转到登录页面,如果没有登录,或者登录信息过期的话
// 携带当前页面路由，以期在登录页面完成登录后返回当前页面
const toLogin = () => {
router.replace({
path: "/login",
query: {
redirect: router.currentRoute.fullPath,
},
});
};
// 提示信息,Toast这个是第三方组件,根据使用的UI组件库不同进行更换
const tip = msg => {
Toast({
message: msg,
duration: 1000,
forbidClick: true
});
}
// 请求拦截器
// (主要是在请求的时候携带请求token,以协助后端进行判断身份信息是否过期等),或者还可以在此增加业务操作,比如请求之前展示loading效果,具体可以拿个第三方UI库的一个效果过来使用
axios.interceptors.request.use(
config => {
// 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
// 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
const token = store.state.token;
token && (config.headers.Authorization = token);
return config;
},
error => {
return Promise.error(error);
}
);
// 响应拦截器(主要对code进行判断,提示用户进行操作)
axios.interceptors.response.use(
response => {
if (response.status === 200) {
return Promise.resolve(response);
} else {
return Promise.reject(response);
}
},
// 服务器状态码不是200的情况
error => {
if (error.response.status) {
switch (error.response.status) {
// 401: 未登录
// 未登录则跳转登录页面，并携带当前页面的路径
// 在登录成功后返回当前页面，这一步需要在登录页操作。
case 401:
tip("未登录，请先登录");
setTimeout(()=> {
toLogin();
},1000)
break;
// 403 token过期
// 登录过期对用户进行提示
// 清除本地token和清空vuex中token对象
// 跳转登录页面
case 403:
tip("登录过期，请重新登录");
// 清除token
localStorage.removeItem("token"); //如果存在了浏览器的localStorage
// store.commit("loginSuccess", null); //如果存在store里的登录状态，获取其它相关信息
// 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
setTimeout(() => {
toLogin();
}, 1000);
break;
// 404请求不存在
case 404:
tip("网络请求不存在");
break;
// 其他错误，直接抛出错误提示
default:
tip(error.response.data.message);
break;
}
return Promise.reject(error.response);
}
}
);
//get方法
export function get(url, params){
return new Promise((resolve, reject) =>{
axios.get(url, {
params: params
})
.then(res => {
resolve(res.data);
})
.catch(err => {
reject(err.data)
})
});
}
//post方法
export function post(url, params) {
return new Promise((resolve, reject) => {
axios.post(url, JSON.stringify(params))
.then(res => {
resolve(res.data);
})
.catch(err => {
reject(err.data)
})
});
}
// put方法
export function put(url, params){
return new Promise((resolve, reject) =>{
axios.put(url, {
params: params
})
.then(res => {
resolve(res.data);
})
.catch(err => {
reject(err.data)
})
});
}
// delete方法
export function del(url, params){
return new Promise((resolve, reject) =>{
axios.delete(url, {
params: params
})
.then(res => {
resolve(res.data);
})
.catch(err => {
reject(err.data)
})
});
}
// 导出实例
export default instance;
三、对请求统一管理
创建一个文件夹用于存放接口的请求，到时候用起来，只需要导出请求的方法就行，统一管理。不然全堆在页面上，一大串代码有点难看！
先从我们封装好的axios里面导出具体的请求方法
以下示例：
四、页面上使用
先导出请求接口的具体方法
import { pwlogin } from "../api/login";使用：
getloginres() {
pwlogin(data)
.then((res) => {
//数据处理
})
.catch((err) => console.log(err));
}以上就是全部，错误欢迎提出！
