关于axios:前端网络层优化

旧计划

在一个 js 文件堆放所有接口，间接用 axios 的 post/get 办法来封装好。调用端，要思考不同接口的不同状态码、返回的不同格局

问题

在日常的开发需要，会遇到同一个我的项目可能会对接不同的后端开发团队，他们的接口不尽相同，如接口前缀、登录态验证的形式、数据返回的格局（数据字段、状态码）等等，从而减少前端对接口调用代码的凌乱。

剖析

如何兼顾不同的接口标准？前端如何设计才能够让调用端是统一的，不须要理睬接口的细节？

拆散出变的因素，一一剖析：门路前缀、数据返回格局（状态码字段、信息字段、数据字段）、示意胜利的状态码。
不难看出其实就是对 axios 的调用，门路前缀在实例化的时候传递的，其它都是在数据返回的时候解决的。
所以要对不同的后端接口标准新建不同 axios 实例，对不同的实例，在返回的时候，依照对应的格局返回。

新计划

基于 axios 再封装，

ajax.js
import 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.js
const 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);
        });
    });
}

其余

在网络层通常还有以下需要：

1. 主动带上登录态
2. 登录态生效，主动跳转到登录页
3. 让数据处理和视图解决辨别开来，在数据返回的时候做一层过滤。后端返回了冗余的字段，而前端只须要其中几个，从而减少了浏览器的内存占用；数据量大在 Vue2 数据劫持阶段耗费性能。
4. 让数据埋点不侵入业务代码，在数据返回的时候做一层解决

总结和反思

1. 前端进行 axios 再封装，来治理变动的因素。
2. 后端接口标准不雷同，能够倡议他们采纳同一个标准。