項目使用iView UI Pro版本，系統使用iView Admin Pro框架開發，并使用既有模版作為用戶中心模版，前端頁面使用自定義模版開發。 接口模擬： ## 定制請求攔截器 > 通過定制請求攔截器，統一處理錯誤。 修改`plugins/request.js`文件，適配后端的接口數據返回規范。 ``` import store from "@/store"; import axios from "axios"; import util from "@/libs/util"; import Setting from "@/setting"; import { Message, Notice } from "view-design"; // 創建一個錯誤 function errorCreate(msg) { const err = new Error(msg); errorLog(err); throw err; } // 記錄和顯示錯誤 function errorLog(err) { // 添加到日志 store.dispatch("admin/log/push", { message: "數據請求異常", type: "error", meta: { error: err, }, }); // 打印到控制臺 if (process.env.NODE_ENV === "development") { util.log.error(">>>>>> Error >>>>>>"); console.log(err); } // 顯示提示，可配置使用 iView 的 $Message 還是 $Notice 組件來顯示 if (Setting.errorModalType === "Message") { Message.error({ content: err.message, duration: Setting.modalDuration, }); } else if (Setting.errorModalType === "Notice") { Notice.error({ title: "提示", desc: err.message, duration: Setting.modalDuration, }); } } // 創建一個 axios 實例 const service = axios.create({ baseURL: Setting.apiBaseURL, timeout: 5000, // 請求超時時間 }); // 請求攔截器 service.interceptors.request.use( (config) => { // 在請求發送之前做一些處理 const token = util.cookies.get("token"); // 讓每個請求攜帶token-- ['X-Token']為自定義key 請根據實際情況自行修改 config.headers["Authorization"] = token; return config; }, (error) => { // 發送失敗 console.log(error); Promise.reject(error); } ); // 響應攔截器 service.interceptors.response.use( (response) => { // console.log(response) // dataAxios 是 axios 返回數據中的 data const dataAxios = response.data; // 這個狀態碼是和后端約定的 // const { errno, errmsg, data } = dataAxios; const { errno } = dataAxios; // 根據 code 進行判斷 if (errno === undefined) { // 如果沒有 code 代表這不是項目后端開發的接口 return dataAxios; } else { // 有 code 代表這是一個后端接口 可以進行進一步的判斷 switch (errno) { case 0: // errno === 0 代表沒有錯誤 return dataAxios.data; case 1000: // [ 示例 ] 其它和后臺約定的 code errorCreate( `[ code: 1000 ] ${dataAxios.errmsg}: ${response.config.url}` ); break; default: // 不是正確的 code errorCreate( `[ code: ${errno} ] ${dataAxios.errmsg}: ${response.config.url}` ); break; } } }, (error) => { // console.log(error); if (error && error.response) { switch (error.response.status) { case 400: error.message = "請求錯誤"; break; case 401: error.message = "未授權，請登錄"; break; case 403: error.message = "拒絕訪問"; break; case 404: error.message = `請求地址出錯: ${error.response.config.url}`; break; case 408: error.message = "請求超時"; break; case 500: error.message = "服務器內部錯誤"; break; case 501: error.message = "服務未實現"; break; case 502: error.message = "網關錯誤"; break; case 503: error.message = "服務不可用"; break; case 504: error.message = "網關超時"; break; case 505: error.message = "HTTP版本不受支持"; break; default: break; } } errorLog(error); return Promise.reject(error); } ); export default service; ```