前端网络层优化

Posted 2021-09-03 RockerLau

旧方案

在一个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. 后端接口规范不相同，可以建议他们采用同一个规范。