javascript - 后端接口返回的时间 和 axios 从 request 到 response 过程的时间 相差巨大?

Question

后端接口返回的时间 和 axios 从 request 到 response 过程的时间 相差巨大?

背景
在用扫码枪扫货品的时候会调接口 每扫一个货品需要请求三个不同接口 在扫前40个货品的时候时间相差不大, 但是一直扫到150+货品的时候 就会出现 时间相差很大的情况

 

图一是接口返回的时间180ms 图三 从axios request 到 response 前 变成了 800ms
图四 在组件内发起请求到数据返回 时间变成了差不多1800ms 中间没做数据操作 只有增加了请求拦截和响应错误码处理 中间的时间相差这么多 是什么问题导致呢？

// import axios from 'axios'import axios, { AxiosRequestConfig, AxiosResponse, CancelTokenSource } from 'axios';import baseUrl, { differUrl } from './baseUrl';import router from '@/router';import store from '@/store';import { Message } from 'element-ui';import { vMessage } from '@rbp/components/base-message';import { filedMapData, moduleIdMapData } from './config';import { hideScreenLoading, showScreenLoading } from '@/utils/loading';import { getCookie, getToken, removeCookie } from '@/utils/auth';let configChace: any = null; // 存放请求参数，在进入错误时候也关掉loadingconst CANCELTTYPE = {    CACHE: 1,    REPEAT: 2};interface Request {    onlyKey: string;    url: string;    source: CancelTokenSource;}const pendingRequests: Request[] = [];const config = {    // timeout: 1000 * 60 * 10    // baseURL: baseUrl};// eslint-disable-next-line no-unused-varsconst _axios = axios.create(config);const DELAY = 0;let timer: any, loadingInstance: any;const setBaseUrl = (config) => {    const initUrl = config.url;    if (initUrl && initUrl.startsWith('/customize')) {        config.baseURL = differUrl || baseUrl;        config.baseURL = config.baseURL.replace('/manager', '');        config.timeout = 1000 * 60 * 10;    } else if (initUrl && initUrl.startsWith('/report')) {        config.baseURL = (Window as any).config.reportUrl || baseUrl;        config.timeout = 1000 * 60 * 10;    } else if (initUrl && initUrl.startsWith('/new-mf-fac')) {        config.baseURL = localStorage.getItem('JuNiu_WebAddress') || baseUrl;        config.timeout = 1000 * 60 * 10;    } else {        config.baseURL = baseUrl;        config.timeout = 1000 * 60 * 3;    }};const setToken = (config) => {    const token = getToken();    const refreshToken = getCookie('refreshToken');    config.headers.Lang = getCookie('language') || 'zh_chs';    if (token) {        config.headers['Authorization'] = token; // 让每个请求携带自定义token 请根据实际情况自行修改    }    if (refreshToken) {        config.headers['RefreshToken'] = refreshToken;    }};const setModuleId = (config) => {    const formatRouter: any = (window as any).__POWERED_BY_QIANKUN__ ? (window as any).ymyCustomizeRouter : router;    // 模块 ID 参数 全局传入    // const moduleId = (router as any).history.current.meta.moduleId;    // let moduleId =    //     (window as any).Vue2 && (window as any).Vue2.prototype    //         ? (window as any).Vue2.prototype._router_.history.current.meta.moduleId    //         : (router as any).history.current.meta.moduleId;    let moduleId =        (window as any).Vue2 && (window as any).Vue2.prototype            ? (window as any).Vue2.prototype._router_.history.current.meta.moduleId            : formatRouter.history.current.meta.moduleId;    // 对于非/customize接口，替换moduleId为新moduleId    if (config?.url.indexOf('/customize') < 0 && config?.url.indexOf('/role/authority') < 0) {        const obj = moduleIdMapData(config.url, moduleId) || filedMapData(config.url, moduleId);        if (obj?.moduleId) {            config.url = obj.url;            moduleId = obj.moduleId;            if (config.params) {                Object.keys(config.params).forEach((key) => {                    if (['baseModuleId', 'moduleId'].includes(key)) {                        config.params[key] = obj.moduleId;                    }                });            }        }    }    // if (moduleId && config.data) {    // if (config.data && config.data.moduleId) {    //     Object.assign(config.data, { moduleId: config.data.moduleId });    // }    if (moduleId && config.data) {        // NetNeedModuleId 接口不需要 moduleId 为 true 则不需要加        if (config.data.NetNeedModuleId) {            delete config.data.NetNeedModuleId;        } else {            if (Object.keys(config.data).indexOf('moduleId') > -1) {                moduleId = config.data.moduleId;            }            Object.assign(config.data, { moduleId: moduleId });            if (typeof config.data.data === 'object') {                if (config?.url.indexOf('/customize') < 0) {                    // 对于非/customize接口，将参数中moduleId替换为新moduleId                    if (Object.keys(config.data.data).indexOf('moduleId') > -1) {                        config.data.data.moduleId = moduleId;                    }                } else {                    if (Object.keys(config.data.data).indexOf('moduleId') > -1 && config.data.data.moduleId) {                        moduleId = config.data.data.moduleId;                    }                }                Object.assign(config.data.data, { moduleId: moduleId });            }        }        if (config.data.setModuleIdInHeaders) {            config.headers['moduleId'] = moduleId;            delete config.data.setModuleIdInHeaders;        }    }};const setLoading = (config) => {    configChace = config;    // NetNeedModuleId 接口不需要 moduleId 为 true 则不需要加    if (config.method === 'get' && (!config.params || !config.params.NetNeedLoading)) {        config.headers['showLoading'] = true;        showScreenLoading(config.headers);    } else if (['put', 'post'].includes(config.method) && (!config.data || !config.data.NetNeedLoading)) {        config.headers['showLoading'] = true;        showScreenLoading(config.headers);    }    config.params && delete config.params.NetNeedLoading;    config.data && delete config.data.NetNeedLoading;};const preventSomeRequest = (config) => {    /**     * 为每一次请求生成一个cancleToken     */    const source = axios.CancelToken.source();    config.cancelToken = source.token;    /**     * 将之前的重复且未完成的请求全部取消     */    const params = JSON.stringify(config.params || config.data);    const hits = pendingRequests.filter((item) => item.onlyKey === `${config.baseURL}${config.url}${params}`);    if (hits.length > 0) {        console.error('有重复请求', hits, config);        hits.forEach((item) => item.source.cancel(CANCELTTYPE.REPEAT.toString()));    }    pendingRequests.push({        onlyKey: `${config.baseURL}${config.url}${params}`,        url: `${config.baseURL}${config.url!}`,        source    });};_axios.interceptors.request.use(    function (config: AxiosRequestConfig) {        // 全局请求的 loading，当请求 100 ms 后还没返回，才会出现 loading        console.time('_axios.interceptors.request 请求设置header等等信息');        console.time('请求整理到返回中途所需要时间');        config.headers['request-startTime'] = new Date().getTime();        setBaseUrl(config);        setToken(config);        setModuleId(config);        setLoading(config);        // preventSomeRequest(config);        console.timeEnd('_axios.interceptors.request 请求设置header等等信息');        return config;    },    function (error) {        // clearTimeout(timer);        // if (loadingInstance) loadingInstance.close();        // if (config!.headers.showLoading) {        if (configChace.headers['showLoading']) {            hideScreenLoading();            configChace = null;        }        // }        return Promise.reject(error);    });// Add a response interceptor_axios.interceptors.response.use(    function (response: AxiosResponse) {        // clearTimeout(timer);        // if (loadingInstance) loadingInstance.close();        const headers = response.config.headers;        headers && headers.showLoading && hideScreenLoading();        /**         * code为非20000是抛错 可结合自己业务进行修改         */        /**         * 不论请求是否成功，         * 将本次完成的请求从请求队列中移除         */        // 以同样的加密方式(MD5)获取加密字符串        const index = pendingRequests.findIndex((item) => item.url === response.config.url);        //        if (index > -1) {            pendingRequests.splice(index, 1);        }        if (response.config.responseType === 'blob') {            return response.data;        }        const res = response.data;        const FIXCODE = [            0,            10008,            10107,            10112,            10111,            10010,            20001,            30001,            30102,            30103,            30105,            30106,            40100,            40110,            40120,            40121,            40130,            40131,            40140,            40141,            40142,            40160,            40161,            40170,            40180,            50006,            50008,            50009,            50011,            50013,            50014,            50015,            50016,            50017,            50018,            50019,            50020,            50021,            50022,            50024,            50028, // 联营结算模式审核异常code码            50029,            50030,            50025, // 成本结存异常码（未做库存结存的渠道）            50031, // 成本结存异常码（存在以下未审核单据）            50032, // 成本结存异常码（存在本期数量未负的货品）            50033        ];        const NO_TOKEN_CODE = [10006]; // 没有权限或者和token失效        const PROGRAM_ERROR_CODE = [500, 10001, 10002]; // 显示错误具体信息弹窗 带复制等功能        console.timeEnd('请求整理到返回中途所需要时间');        if (PROGRAM_ERROR_CODE.includes(res.code)) {            // Infrom({ type: 'error', content: res.msg, detail: res.errorStack, confirmButtonText: '关闭' });            Message({                type: 'error',                message: res.msg,                duration: 3500            });            return Promise.reject('error');        } else if (FIXCODE.includes(res.code)) {            const start = response.config.headers['request-startTime'];            const currentTime = new Date().getTime();            const requestDuration = ((currentTime - start) / 1000).toFixed(2) + 's';            console.log(`%caxios.ts line:288 ${response.config.url} 接口花费时间`, 'requestDuration', requestDuration);            // return res;            return Promise.resolve(res);        } else if (NO_TOKEN_CODE.includes(res.code)) {            //接口登陆失效跳转登录页            vMessage({                type: 'error',                message: res.msg || res.errorStack,                showClose: true,                duration: 3500            });            removeCookie('tempToken');            removeCookie('tempRefreshToken');            store.dispatch('user/resetToken').then(() => {                setTimeout(() => {                    window.location.reload();                }, 500);            });            return Promise.reject('loginError');        } else {            Message({                type: 'error',                message: res.msg || res.errorStack,                duration: 3500            });            return Promise.reject('error');        }    },    function (error) {        // clearTimeout(timer);        // if (loadingInstance) loadingInstance.close();        // if (response.config.headers.showLoading) {        // }        // setTimeout(() => {        //     hideScreenLoading();        // }, 200);        // 这里是重复请求不弹出        if (error.message !== CANCELTTYPE.REPEAT.toString()) {            if (configChace.headers['showLoading']) {                hideScreenLoading();                configChace = null;            }            // Infrom({ type: 'error', content: error.msg || '请求超时或服务器异常，请检查网络或联系管理员' });            Message({                type: 'error',                message: error.msg || '请求超时或服务器异常，请检查网络或联系管理员'            });        }        return Promise.reject(error);    });export default _axios;

Answer 1

这段时间涵盖的处理过程太多，尤其是网络过程非常不稳定。要先确定是哪部分造成报时间的大辐增加，如果是网络造成的，那前端不太可能做优化。

如果是想做纯粹的前端监测，从前端可以监测的点开始计时到当前处理不能监测时结束。比如你猜测是拦截引起的效率问题，那你可以只监测这部分处理所花的时间来确认是否是这个问题。

Answer 2

主要看图一的数据,延迟应该是服务端导致的吧,再延迟出现的时候,api的耗时是多少,请截图一的数据,分析一下