前端场景题：实现监控请求时常

实现思路：对请求与响应进行拦截，通过在header中使用performance.now()记录的时间来获取精确的请求时常

以vue中封装的axios为例：

import axios from "axios";

const service = axios.create({
  baseURL: "http://localhost:5000",
  timeout: 5000,
});

//请求拦截
service.interceptors.request.use(
  (config) => {
    const requestTime = performance.now();
    config.headers.requestTime = requestTime;
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

//响应拦截
service.interceptors.response.use(
  (response) => {
    //获取相应数据后的操作
    const res = response.data;
    const requestDuration =
      performance.now() - response.config.headers.requestTime;
    res.requestDuration = requestDuration.toFixed(2) + "ms";
    return res;
  },
  (error) => {
    //错误处理
    return Promise.reject(error);
  }
);

export default service;

const Request = (
  method: string,
  url: string,
  data?: Object,
  config?: Object
) => {
  return service({
    method,
    url,
    data,
    ...config,
  }).then((response) => {
    return response;
  });
};
export const getRequest = (url: string) => Request("get", url);

使用：

getRequest("https://ljynet.com:5000/getGongneng")
  .then((response: any) => {
    console.log(response.requestDuration);
    // 处理成功返回的数据
  })
  .catch((error: any) => {
    console.error("请求失败:", error);
    // 处理错误
  });