政務網站設計,wordpress文章關聯(lián)微信,應用商店下載安裝到桌面,婚慶公司電話號碼#xff08;對axios還不熟悉#xff0c;可能有不對的地方#xff0c;歡迎指正#xff09; 一、二次封裝 axios二次封裝#xff1a;從請求中提取相同的功能封裝成一個組件#xff0c;響應也類似?？梢蕴岣叽a復用性#xff0c;并且集中處理請求/相應邏輯。二次封裝步驟對axios還不熟悉可能有不對的地方歡迎指正一、二次封裝axios二次封裝從請求中提取相同的功能封裝成一個組件響應也類似?？梢蕴岣叽a復用性并且集中處理請求/相應邏輯。二次封裝步驟創(chuàng)建封裝文件一般在src/utils文件夾然后創(chuàng)建axios實例// 創(chuàng)建 axios 實例constrequestaxios.create({baseURL:process.env.VUE_APP_BASE_API,// API 基礎路徑timeout:10000,// 超時時間headers:{// 默認請求頭Content-Type:application/json}});添加請求攔截器添加響應攔截器添加輔助函數// 處理 token 過期functionhandleTokenExpired(){// 清除 tokenlocalStorage.removeItem(token);sessionStorage.removeItem(token);// 顯示提示Modal.confirm({title:登錄已過期,content:您的登錄已過期請重新登錄,okText:重新登錄,onOk(){// 跳轉到登錄頁router.replace(/login);}});}// 處理業(yè)務錯誤functionhandleBusinessError(code,message){consterrorMessages{1001:用戶名或密碼錯誤,1002:驗證碼錯誤,1003:賬號已被鎖定,2001:token 已過期,2002:token 無效,// ... 其他業(yè)務錯誤碼};consterrorMsgerrorMessages[code]||message||操作失敗;message.error(errorMsg);// 特殊錯誤碼處理if([2001,2002].includes(code)){handleTokenExpired();}}封裝常用請求方法… …二、攔截器以請求攔截器為例執(zhí)行流程請求 → 請求攔截器 → 服務器 → 響應 → 響應攔截器 → 你的代碼請求攔截器用于統(tǒng)一處理響應數據axios.interceptors.response.use((response){// 假設后端返回 { code: 0, data: {...}, message: success }if(response.data.code0){returnresponse.data.data;// 直接返回業(yè)務數據}else{returnPromise.reject(response.data.message);}},(error){returnPromise.reject(error);});// 使用直接拿到業(yè)務數據不用再 response.data.dataconstdataawaitaxios.get(/api/user);完整的請求生命周期請求攔截器在請求發(fā)出前執(zhí)行響應攔截器在響應到達后執(zhí)行執(zhí)行順序請求攔截器按代碼順序執(zhí)行1→2→3響應攔截器代碼的逆序后進先出后寫的先執(zhí)行3→2→1