一、原因

????????像是在一些業務邏輯上，比如需要在請求之前展示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));}

以上就是全部，錯誤歡迎提出！