vue对axios进行请求响应封装

一、原因

        像是在一些业务逻辑上，比如需要在请求之前展示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,   //设置baseurltimeout: 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("登录过期，请重新登录");// 清除tokenlocalStorage.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));}

以上就是全部，错误欢迎提出！