实现思路:对请求与响应进行拦截,通过在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);// 处理错误});