项目使用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; ```