旧计划
在一个js文件堆放所有接口，间接用axios的post/get办法来封装好。调用端，要思考不同接口的不同状态码、返回的不同格局
问题
在日常的开发需要，会遇到同一个我的项目可能会对接不同的后端开发团队，他们的接口不尽相同，如接口前缀、登录态验证的形式、数据返回的格局（数据字段、状态码）等等，从而减少前端对接口调用代码的凌乱。
剖析
如何兼顾不同的接口标准？前端如何设计才能够让调用端是统一的，不须要理睬接口的细节？
拆散出变的因素，一一剖析：门路前缀、数据返回格局（状态码字段、信息字段、数据字段）、示意胜利的状态码。
不难看出其实就是对axios的调用，门路前缀在实例化的时候传递的，其它都是在数据返回的时候解决的。
所以要对不同的后端接口标准新建不同axios实例，对不同的实例，在返回的时候，依照对应的格局返回。
新计划
基于axios再封装，
ajax.jsimport axios from 'axios';import qs from 'qs';import useInterceptors from './interceptors';class AJAX { constructor(cfg) { // 胜利标记key this.reqSuccessKey = cfg.reqSuccessKey || 'code'; // 胜利标记value this.reqSuccessValue = cfg.reqSuccessValue || [200]; // 音讯key this.msgKey = cfg.msgKey || 'msg'; // 数据key this.dataKey = cfg.dataKey || 'data'; // url前缀 this.basePathPrefix = cfg.basePathPrefix || ''; // 实例化axios this.instance = axios.create({ baseURL: cfg.basePathPrefix, timeout: cfg.timeout || 30000 }); // 初始化interceptors useInterceptors(this.instance) } get(url) { return this.fetch(url); } post(url) { return this.fetch(url, 'post'); } fetch(url, method='get') { return async (query = {}, config = {}) => { if (method === 'get') { query = { params: query }; } try { const res = await this.instance[method](url, query, config); if (this.reqSuccessValue.includes(res[this.reqSuccessKey])) { return res[this.dataKey]; } throw res; } catch (e) { throw e; } }; } }export default AJAX;interceptors.jsconst request = [];const response = [];const interceptors = { request, response};export default function (ajax) { Object.keys(interceptors).forEach(key => { interceptors[key].forEach(interceptor => { ajax.interceptors[key].use(interceptor); }); });}其余
在网络层通常还有以下需要：
- 主动带上登录态
- 登录态生效，主动跳转到登录页
- 让数据处理和视图解决辨别开来，在数据返回的时候做一层过滤。后端返回了冗余的字段，而前端只须要其中几个，从而减少了浏览器的内存占用；数据量大在Vue2数据劫持阶段耗费性能。
- 让数据埋点不侵入业务代码，在数据返回的时候做一层解决
总结和反思
- 前端进行axios再封装，来治理变动的因素。
- 后端接口标准不雷同，能够倡议他们采纳同一个标准。