前端场景题:实现监控请求时常
实现思路:对请求与响应进行拦截,通过在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);
// 处理错误
});