有人可以建议任何方法来获得Axios的响应时间吗?我发现了axios-timing,但我并不喜欢它(有争议,我知道)。我只是想知道是否有其他人找到了一些记录响应时间的好方法。
答案 0 :(得分:14)
您可以使用axios的拦截器概念。
请求Intercepor将设置开始时间
axios.interceptors.request.use(function (config) {
config.metadata = { startTime: new Date()}
return config;
}, function (error) {
return Promise.reject(error);
});
响应拦截器将设置endTime并计算持续时间
axios.interceptors.response.use(function (response) {
response.config.metadata.endTime = new Date()
response.duration = response.config.metadata.endTime - response.config.metadata.startTime
return response;
}, function (error) {
error.config.metadata.endTime = new Date();
error.duration = error.config.metadata.endTime - error.config.metadata.startTime;
return Promise.reject(error);
});
答案 1 :(得分:5)
这是我的解决方案,方法是在拦截器中设置标题:
import axios from 'axios'
const url = 'https://example.com'
const instance = axios.create()
instance.interceptors.request.use((config) => {
config.headers['request-startTime'] = process.hrtime()
return config
})
instance.interceptors.response.use((response) => {
const start = response.config.headers['request-startTime']
const end = process.hrtime(start)
const milliseconds = Math.round((end[0] * 1000) + (end[1] / 1000000))
response.headers['request-duration'] = milliseconds
return response
})
instance.get(url).then((response) => {
console.log(response.headers['request-duration'])
}).catch((error) => {
console.error(`Error`)
})
答案 2 :(得分:1)
{带@user3653268-我修改了答案以与react挂钩一起使用,并使用模数显示x.xxx秒。
import React, { useState } from 'react';
import axios from 'axios';
export default function Main() {
const [axiosTimer, setAxiosTimer] = useState('');
const handleSubmit = () => {
let startTime = Date.now();
axios.post('urlstuff')
.then(response => {
console.log('handleSubmit response: ', response);
axiosTimerFunc(startTime);
})
.catch(err => {
console.log("handleSubmit error:", err.response.data.message)
axiosTimerFunc(startTime);
setLoading(false);
});
}
const axiosTimerFunc = (startTime) => {
let now = Date.now();
let seconds = Math.floor((now - startTime)/1000);
let milliseconds = Math.floor((now - startTime)%1000);
setAxiosTimer(`${seconds}.${milliseconds} seconds`);
}
return(
<div>
<h2>Load Time: {axiosTimer}</h2>
</div>
)
}
答案 3 :(得分:1)
另一种简单的方法:
axios.interceptors.response.use(
(response) => {
console.timeEnd(response.config.url);
return response;
},
(error) => {
console.timeEnd(error.response.config.url);
return Promise.reject(error);
}
);
axios.interceptors.request.use(
function (config) {
console.time(config.url );
return config;
}, function (error) {
return Promise.reject(error);
});
答案 4 :(得分:0)
很久以后,但这是我的简单解决方法
function performSearch() {
var start = Date.now();
var url='http://example.com';
var query='hello';
axios.post(url,{'par1':query})
.then(function (res) {
var millis = Date.now() - start;
$('.timer').html(""+Math.floor(millis/1000)+"s")
})
.catch(function (res) {
console.log(res)
})
}
这是我的解决方法
答案 5 :(得分:0)
这是另一种方法:
const instance = axios.create()
instance.interceptors.request.use((config) => {
config.headers['request-startTime'] = new Date().getTime();
return config
})
instance.interceptors.response.use((response) => {
const currentTime = new Date().getTime()
const startTime = response.config.headers['request-startTime']
response.headers['request-duration'] = currentTime - startTime
return response
})
instance.get('https://example.com')
.then((response) => {
console.log(response.headers['request-duration'])
}).catch((error) => {
console.error(`Error`)
})