前端最终规范


axios 配置

<pre><code class="language-markdown">import Vue from 'vue' import axios from 'axios' import { baseURL, contentType, debounce, messageName, requestTimeout, statusName, successCode, casUrl, returnUrl /* tokenName, */ } from '@/config' import store from '@/store' import qs from 'qs' import router from '@/router' import { isArray } from '@/utils/validate' import { checkNeed } from '@/vab/plugins/errorLog' let loadingInstance // 操作正常Code数组 const codeVerificationArray = isArray(successCode) ? [...successCode] : [...[successCode]] const CODE_MESSAGE = { 200: '服务器成功返回请求数据', 201: '新建或修改数据成功', 202: '一个请求已经进入后台排队(异步任务)', 204: '删除数据成功', 400: '发出信息有误', 401: '用户没有权限(令牌、用户名、密码错误)', 403: '用户得到授权,但是访问是被禁止的', 404: '访问资源不存在', 406: '请求格式不可得', 410: '请求资源被永久删除,且不会被看到', 500: '服务器发生错误', 502: '网关错误', 503: '服务不可用,服务器暂时过载或维护', 504: '网关超时', } const handleData = ({ config, data, status, statusText }) =&gt; { if (loadingInstance) loadingInstance.close() // 若data.code存在,覆盖默认code let code = data &amp;&amp; data[statusName] ? data[statusName] : status // 若code属于操作正常code,则status修改为200 if (codeVerificationArray.indexOf(data[statusName]) + 1) code = 200 switch (code) { case 200: // 业务层级错误处理,以下是假定restful有一套统一输出格式(指不管成功与否都有相应的数据格式)情况下进行处理 // 例如响应内容: // 错误内容:{ status: 1, msg: '非法参数' } // 正确内容:{ status: 200, data: { }, msg: '操作正常' } // 修改返回内容为 `data` 内容,对于绝大多数场景已经无须再关心业务状态码(code)和消息(msg) // 或者依然保持完整的格式 // return data return data.data ? data.data : data.msg case 401: store .dispatch('user/resetAll') .then(() =&gt; router.push({ path: '/login', replace: true }).then(() =&gt; {})) break case 400: Vue.prototype.$baseMessage('传递参数不正确', 'error') return {} break case 403: router.push({ path: '/403' }).then(() =&gt; {}) break case "4404": Vue.prototype.$baseMessage(data.msg, 'error') store .dispatch('user/resetAll') .then(() =&gt; router.push({ path: '/login', replace: true }).then(() =&gt; {})) return; case "4403": Vue.prototype.$baseMessage(data.msg, 'error') store .dispatch('user/resetAll') .then(() =&gt; router.push({ path: '/login', replace: true }).then(() =&gt; {})); return; default: return data } // 异常处理 // 若data.msg存在,覆盖默认提醒消息 const message = `${config.url} 后端接口 ${code} 异常:${!data ? CODE_MESSAGE[code] : !data[messageName] ? statusText : data[messageName]}` if (checkNeed()) store .dispatch('errorLog/addErrorLog', { err: new Error(message), vm: null, info: message, url: config.url, }) .then(() =&gt; {}) return Promise.reject(message) } /** * @description axios初始化 */ const instance = axios.create({ baseURL, timeout: requestTimeout, headers: { 'Content-Type': contentType, }, }) /** * @description axios请求拦截器 */ instance.interceptors.request.use( config =&gt; { const token = store.getters['user/token'] // 不规范写法 可根据setting.config.js tokenName配置随意自定义headers // if (token) config.headers[tokenName] = token // 规范写法 不可随意自定义 if (token) config.headers['Authorization'] = `bearer ${token}` if ( config.data &amp;&amp; config.headers['Content-Type'] === 'application/x-www-form-urlencoded;charset=UTF-8' ) config.data = qs.stringify(config.data) if (debounce.some(item =&gt; config.url.includes(item))) loadingInstance = Vue.prototype.$baseLoading() return config }, error =&gt; { return Promise.reject(error) } ) /** * @description axios响应拦截器 */ instance.interceptors.response.use( response =&gt; handleData(response), error =&gt; { const { response } = error console.log('error',error) if (response === undefined) { Vue.prototype.$baseMessage('未可知错误,大部分是由于后端不支持跨域CORS或无效配置引起', 'error') return {} } else return handleData(response) } ) export default instance </code></pre>

页面列表

ITEM_HTML