您好,登錄后才能下訂單哦!
這篇文章主要介紹了如何封裝一個好用的axios的相關(guān)知識,內(nèi)容詳細(xì)易懂,操作簡單快捷,具有一定借鑒價值,相信大家閱讀完這篇如何封裝一個好用的axios文章都會有所收獲,下面我們一起來看看吧。
列一下我想要這個通用請求能達(dá)到什么樣的效果
1.正常請求該有的(跨域攜帶cookie,token,超時設(shè)置)
2.請求響應(yīng)攔截器
請求成功,業(yè)務(wù)狀態(tài)碼200,解析result給我,我不想一層一層的去判斷拿數(shù)據(jù)
http請求200, 業(yè)務(wù)狀態(tài)碼非200,說明邏輯判斷這是不成功的,那就全局message提示服務(wù)端的報錯
http請求非200, 說明http請求都有問題,也全局message提示報錯
http請求或者業(yè)務(wù)狀態(tài)碼401都做注銷操作
3.全局的loading配置, 默認(rèn)開啟,可配置關(guān)閉(由于后端的問題,經(jīng)常會讓前端加防抖節(jié)流或者loading不讓用戶在界面上瘋狂亂點(diǎn),行吧行吧,你們的問題前端幫你們解決,你的規(guī)矩就是規(guī)矩是吧????)
4.統(tǒng)一文件下載處理 (不要再去各寫各的下載了,你寫一個,他寫一個,一個項目就是這樣整的跟屎一樣)
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) { // 在發(fā)送請求之前做些什么 console.log("config:", config); // config.headers.Authorization = vm.$Cookies.get("vue_admin_token"); return config; }, function (error) { // 對請求錯誤做些什么 return Promise.reject(error); } ); // 添加響應(yīng)攔截器 instance.interceptors.response.use( function (response) { // 對響應(yīng)數(shù)據(jù)做點(diǎn)什么 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) { // 對響應(yīng)錯誤做點(diǎn)什么 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 || "服務(wù)端異常"); return Promise.reject(error); } ); return instance; };
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請求數(shù)量等于1,彈出loading, 防止重復(fù)彈出 requestNum++; if (requestNum == 1) { loadingInstance = Loading.service({ text: "正在努力加載中....", background: "rgba(0, 0, 0, 0)", }); } }; const cancelLoading = () => { // 取消loading 如果pending請求數(shù)量等于0,關(guān)閉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) { // 在發(fā)送請求之前做些什么 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); } ); // 添加響應(yīng)攔截器 instance.interceptors.response.use( function (response) { // 對響應(yīng)數(shù)據(jù)做點(diǎn)什么 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) { // 對響應(yīng)錯誤做點(diǎn)什么 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 || "服務(wù)端異常"); 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請求數(shù)量等于1,彈出loading, 防止重復(fù)彈出 requestNum++; if (requestNum == 1) { loadingInstance = Loading.service({ text: "正在努力加載中....", background: "rgba(0, 0, 0, 0)", }); } }; const cancelLoading = () => { // 取消loading 如果pending請求數(shù)量等于0,關(guān)閉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) { // 在發(fā)送請求之前做些什么 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); } ); // 添加響應(yīng)攔截器 instance.interceptors.response.use( function (response) { // 對響應(yīng)數(shù)據(jù)做點(diǎn)什么 console.log("response:", response); const { loading = true } = response.config; if (loading) cancelLoading(); const { code, data, message } = response.data; // config設(shè)置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) { // 對響應(yīng)錯誤做點(diǎn)什么 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 || "服務(wù)端異常"); return Promise.reject(error); } ); return instance; };
src/utils/index.ts import { Message } from "element-ui"; import { AxiosResponse } from "axios"; import vm from "@/main"; /** * 跳轉(zhuǎn)登錄 */ 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); // 成功 說明是普通對象數(shù)據(jù) 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 }); // 不需要默認(rèn)的全局loading效果可配置loading為false關(guān)閉 loading默認(rèn)為true // 文件下載 export const exportGoods = (data: any) => request.post("/export", data, { responseType: "blob", });
關(guān)于“如何封裝一個好用的axios”這篇文章的內(nèi)容就介紹到這里,感謝各位的閱讀!相信大家對“如何封裝一個好用的axios”知識都有一定的了解,大家如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。