老方案把所有接口都堆叠在一个js文件里，直接用axios的post/get方法封装。在调用端，需要考虑不同接口的不同状态码和返回的不同格式。在日常开发需求中，同一个项目可能会接入不同的后端开发团队，他们的接口是不一样的，比如接口前缀，登录状态验证的方法，数据返回的格式（数据字段，状态码)等，从而增加了前端对接口调用代码的混淆。分析如何考虑不同的接口规范？前端如何设计，让调用端保持一致，不需要关心接口细节？把可变因素分离出来一一分析：路径前缀、数据返回格式（状态码字段、信息字段、数据字段）、表示成功的状态码。不难看出，其实是对axios的调用，实例化的时候传递路径前缀，其他的在返回数据的时候处理。所以需要针对不同的后端接口规范创建不同的axios实例，在返回不同的实例时以相应的格式返回。新方案基于axios重新打包，ajax.jsimportaxiosfrom'axios';importqsfrom'qs';importuseInterceptorsfrom'./interceptors';classAJAX{constructor(cfg){//successflagkeythis.reqSuccessKey=cfg.reqSuccessKey||'代码';//成功标志值this.reqSuccessValue=cfg.reqSuccessValue||[200]；//消息键this.msgKey=cfg.msgKey||'消息';//数据键this.dataKey=cfg.dataKey||'数据';//url前缀this.basePathPrefix=cfg.basePathPrefix||'';//实例化axiosthis.instance=axios.create({baseURL:cfg.basePathPrefix,timeout:cfg.timeout||30000});//初始化拦截器useInterceptors(this.instance)}get(url){returnthis.fetch(url);}post(url){returnthis.fetch(url,'post');}fetch(url,method='get'){returnasync(query={},config={})=>{if(method==='get'){query={参数：查询}；}try{constres=awaitthis.instance[method](url,query,config);如果(this.reqSuccessValue.includes(res[this.reqSuccessKey])){返回res[this.dataKey];}扔水库;}catch(e){抛出e;}};}}exportdefaultAJAX;interceptors.jsconstrequest=[];constresponse=[];constinterceptors={request,response};exportdefaultfunction(ajax){Object.keys(interceptors).forEach(key=>{interceptors[key].forEach(interceptor=>{ajax.interceptors[key].use(interceptor);});});}网络中的其他层通常有如下需求：自动带上登录状态使之失效登录状态，自动跳转到登录页面区分数据处理和视图处理，返回数据时进行一层过滤。后端返回冗余字段。前端只需要其中的几个，增加了浏览器的内存占用；Vue2数据劫持阶段数据量大，性能消耗大。让数据埋点不侵入业务代码，做一层处理总结，在数据返回的时候反映在前端重新打包axios，对变化的因素进行管理。后端接口规范不同，建议采用相同的规范。
