十分鐘封裝一個好用的axios步驟示例
前言
項目啟動會議上，大傢各種出排期，各種出方案，大多數人的焦點都放在後端技術方案上，感情大傢好像都覺得前期準備工作前端沒啥好做的，不都有現成的腳手架嗎？別人不都幫你做好瞭嗎？💉💉我丟。。。。你說的好像不是沒有道理，但是你真的用過官方的腳手架嗎，除瞭幫我生成項目目錄和打包編譯之類的配置，還是有些框架層面的東西要我自己做的好吧。我不管我不管，你們都有啟動準備排期，我他喵的也要！！🔫
想想需要做什麼
我爭取到瞭一周的準備（劃水摸魚）時間，主要還是後端的大佬們牛批會爭取啊，我隻能和他們持平瞭，啊哈哈哈。先用vue-cli生成一個project吧，想想做些什麼，想到以前的做項目通用請求能力封裝這一塊前期做的不太好，導致後面寫起來一堆冗餘代碼，著實惡心到我瞭。那我必須前期把這個整整🙌🙌
通用能力
列一下我想要這個通用請求能達到什麼樣的效果
1.正常請求該有的（跨域攜帶cookie，token，超時設置）
2.請求響應攔截器
- 請求成功，業務狀態碼200，解析result給我，我不想一層一層的去判斷拿數據
- http請求200， 業務狀態碼非200，說明邏輯判斷這是不成功的，那就全局message提示服務端的報錯
- http請求非200， 說明http請求都有問題，也全局message提示報錯
- http請求或者業務狀態碼401都做註銷操作
3.全局的loading配置, 默認開啟，可配置關閉（由於後端的問題，經常會讓前端加防抖節流或者loading不讓用戶在界面上瘋狂亂點，行吧行吧，你們的問題前端幫你們解決，你的規矩就是規矩是吧🍜）
4.統一文件下載處理 （不要再去各寫各的下載瞭，你寫一個，他寫一個，一個項目就是這樣整的跟屎一樣）
一步一步添加功能實現
正常請求該有的
import axios, { AxiosInstance, AxiosRequestConfig } from "axios";
export const createAxiosByinterceptors = (
config?: AxiosRequestConfig
): AxiosInstance => {
const instance = axios.create({
timeout: 1000, //超時配置
withCredentials: true, //跨域攜帶cookie
...config, // 自定義配置覆蓋基本配置
});
return instance;
};
請求響應攔截器
import axios, { AxiosInstance, AxiosRequestConfig } from "axios";
import { Message } from "element-ui";
import { jumpLogin } from "@/utils";
export const createAxiosByinterceptors = (
config?: AxiosRequestConfig
): AxiosInstance => {
const instance = axios.create({
timeout: 1000, //超時配置
withCredentials: true, //跨域攜帶cookie
...config, // 自定義配置覆蓋基本配置
});
// 添加請求攔截器
instance.interceptors.request.use(
function (config: any) {
// 在發送請求之前做些什麼
console.log("config:", config);
// config.headers.Authorization = vm.$Cookies.get("vue_admin_token");
return config;
},
function (error) {
// 對請求錯誤做些什麼
return Promise.reject(error);
}
);
// 添加響應攔截器
instance.interceptors.response.use(
function (response) {
// 對響應數據做點什麼
console.log("response:", response);
const { code, data, message } = response.data;
if (code === 200) return data;
else if (code === 401) {
jumpLogin();
} else {
Message.error(message);
return Promise.reject(response.data);
}
},
function (error) {
// 對響應錯誤做點什麼
console.log("error-response:", error.response);
console.log("error-config:", error.config);
console.log("error-request:", error.request);
if (error.response) {
if (error.response.status === 401) {
jumpLogin();
}
}
Message.error(error?.response?.data?.message || "服務端異常");
return Promise.reject(error);
}
);
return instance;
};
全局的loading配置
import axios, { AxiosInstance, AxiosRequestConfig } from "axios";
import { Message } from "element-ui";
import { jumpLogin } from "@/utils";
import { Loading } from "element-ui";
import { ElLoadingComponent } from "element-ui/types/loading";
// import vm from "@/main";
let loadingInstance: ElLoadingComponent | null = null;
let requestNum = 0;
const addLoading = () => {
// 增加loading 如果pending請求數量等於1，彈出loading, 防止重復彈出
requestNum++;
if (requestNum == 1) {
loadingInstance = Loading.service({
text: "正在努力加載中....",
background: "rgba(0, 0, 0, 0)",
});
}
};
const cancelLoading = () => {
// 取消loading 如果pending請求數量等於0，關閉loading
requestNum--;
if (requestNum === 0) loadingInstance?.close();
};
export const createAxiosByinterceptors = (
config?: AxiosRequestConfig
): AxiosInstance => {
const instance = axios.create({
timeout: 1000, //超時配置
withCredentials: true, //跨域攜帶cookie
...config, // 自定義配置覆蓋基本配置
});
// 添加請求攔截器
instance.interceptors.request.use(
function (config: any) {
// 在發送請求之前做些什麼
const { loading = true } = config;
console.log("config:", config);
// config.headers.Authorization = vm.$Cookies.get("vue_admin_token");
if (loading) addLoading();
return config;
},
function (error) {
// 對請求錯誤做些什麼
return Promise.reject(error);
}
);
// 添加響應攔截器
instance.interceptors.response.use(
function (response) {
// 對響應數據做點什麼
console.log("response:", response);
const { loading = true } = response.config;
if (loading) cancelLoading();
const { code, data, message } = response.data;
if (code === 200) return data;
else if (code === 401) {
jumpLogin();
} else {
Message.error(message);
return Promise.reject(response.data);
}
},
function (error) {
// 對響應錯誤做點什麼
console.log("error-response:", error.response);
console.log("error-config:", error.config);
console.log("error-request:", error.request);
const { loading = true } = error.config;
if (loading) cancelLoading();
if (error.response) {
if (error.response.status === 401) {
jumpLogin();
}
}
Message.error(error?.response?.data?.message || "服務端異常");
return Promise.reject(error);
}
);
return instance;
};
統一文件下載處理
import axios, { AxiosInstance, AxiosRequestConfig } from "axios";
import { Message } from "element-ui";
import { jumpLogin, downloadFile } from "@/utils";
import { Loading } from "element-ui";
import { ElLoadingComponent } from "element-ui/types/loading";
// import vm from "@/main";
let loadingInstance: ElLoadingComponent | null = null;
let requestNum = 0;
const addLoading = () => {
// 增加loading 如果pending請求數量等於1，彈出loading, 防止重復彈出
requestNum++;
if (requestNum == 1) {
loadingInstance = Loading.service({
text: "正在努力加載中....",
background: "rgba(0, 0, 0, 0)",
});
}
};
const cancelLoading = () => {
// 取消loading 如果pending請求數量等於0，關閉loading
requestNum--;
if (requestNum === 0) loadingInstance?.close();
};
export const createAxiosByinterceptors = (
config?: AxiosRequestConfig
): AxiosInstance => {
const instance = axios.create({
timeout: 1000, //超時配置
withCredentials: true, //跨域攜帶cookie
...config, // 自定義配置覆蓋基本配置
});
// 添加請求攔截器
instance.interceptors.request.use(
function (config: any) {
// 在發送請求之前做些什麼
const { loading = true } = config;
console.log("config:", config);
// config.headers.Authorization = vm.$Cookies.get("vue_admin_token");
if (loading) addLoading();
return config;
},
function (error) {
// 對請求錯誤做些什麼
return Promise.reject(error);
}
);
// 添加響應攔截器
instance.interceptors.response.use(
function (response) {
// 對響應數據做點什麼
console.log("response:", response);
const { loading = true } = response.config;
if (loading) cancelLoading();
const { code, data, message } = response.data;
// config設置responseType為blob 處理文件下載
if (response.data instanceof Blob) {
return downloadFile(response);
} else {
if (code === 200) return data;
else if (code === 401) {
jumpLogin();
} else {
Message.error(message);
return Promise.reject(response.data);
}
}
},
function (error) {
// 對響應錯誤做點什麼
console.log("error-response:", error.response);
console.log("error-config:", error.config);
console.log("error-request:", error.request);
const { loading = true } = error.config;
if (loading) cancelLoading();
if (error.response) {
if (error.response.status === 401) {
jumpLogin();
}
}
Message.error(error?.response?.data?.message || "服務端異常");
return Promise.reject(error);
}
);
return instance;
};
src/utils/index.ts
import { Message } from "element-ui";
import { AxiosResponse } from "axios";
import vm from "@/main";
/**
* 跳轉登錄
*/
export const jumpLogin = () => {
vm.$Cookies.remove("vue_admin_token");
vm.$router.push(`/login?redirect=${encodeURIComponent(vm.$route.fullPath)}`);
};
/**
* 下載文件
* @param response
* @returns
*/
export const downloadFile = (response: AxiosResponse) => {
console.log("response.data.type:", response.data.type);
return new Promise((resolve, reject) => {
const fileReader = new FileReader();
fileReader.onload = function () {
try {
console.log("result:", this.result);
const jsonData = JSON.parse((this as any).result); // 成功 說明是普通對象數據
if (jsonData?.code !== 200) {
Message.error(jsonData?.message ?? "請求失敗");
reject(jsonData);
}
} catch (err) {
// 解析成對象失敗，說明是正常的文件流
const blob = new Blob([response.data]);
// 本地保存文件
const url = window.URL.createObjectURL(blob);
const link = document.createElement("a");
link.href = url;
const filename = response?.headers?.["content-disposition"]
?.split("filename*=")?.[1]
?.substr(7);
link.setAttribute("download", decodeURI(filename));
document.body.appendChild(link);
link.click();
resolve(response.data);
}
};
fileReader.readAsText(response.data);
});
};
使用
import { createAxiosByinterceptors } from "@/api/request";
const request = createAxiosByinterceptors({
baseURL: localhost:7007,
});
//lodaing配置
export const appList = (params: any): Promise<any> =>
request.get("/app", { params, loading: true }); // 不需要默認的全局loading效果可配置loading為false關閉 loading默認為true
// 文件下載
export const exportGoods = (data: any) =>
request.post("/export", data, {
responseType: "blob",
});
完結撒花😁😁😁
以上就是十分鐘省時又省力封裝一個好用的axios步驟示例的詳細內容，更多關於axios封裝步驟的資料請關註WalkonNet其它相關文章！
推薦閱讀：
- 在項目中封裝axios的實戰過程
- vue3+vite+axios 配置連接後端調用接口的實現方法
- 如何使用TS對axios的進行簡單封裝
- vue中axios封裝使用的完整教程
- vue日常開發基礎Axios網絡庫封裝