reactjs - 如何在获取请求期间显示 Axios 的进度(不是下载或上传)
问题描述
我想要的是在 Axios 收到我的请求时显示进度条。axios
包同时具有onDownloadProgress
和onUploadProgress
在下载或上传期间显示进度条,但在获取请求期间没有进度条。我搜索了很多问题和文章,但它们总是关于下载/上传进度或 Vue.js,我不明白如何在 React 中做到这一点。
我在下面有以下代码(因为我没有下载,所以它不起作用)。
理想情况下,我会自己写;但如果有人能解释我如何将它与我的 Axios 请求集成,我愿意考虑使用axios-progress 包。loadProgressBar()
request = () => {
this.setState({error: null, results: []})
axios({
method: 'get',
url: process.env.REACT_APP_API_LOCALS,
responseType: 'json',
onDownloadProgress: (progressEvent) => {
var percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
this.setState({
loading: percentCompleted
})
},
})
.then(
(response) => {
console.log(response)
this.setState({
results: response.data.results,
error: null,
totalPages: Math.ceil(response.data.count / response.data.results.length)
})
}
)
.catch(
(error) => {
this.setState({
loading: null,
error: true
})
}
);
}
解决方案
以下是在 React 中对我有用的方法:
const client = axios.create({
baseURL: 'http://localhost:10000/v1/client',
timeout: 20000
})
let result = await client.get('/fetchMeSomething', {
onDownloadProgress: progressEvent => {
const total = parseFloat(progressEvent.currentTarget.responseHeaders['Content-Length'])
const current = progressEvent.currentTarget.response.length
let percentCompleted = Math.floor(current / total * 100)
console.log('completed: ', percentCompleted)
}
})
.then(res => {
console.log("All DONE: ", res.headers)
return res.data
})
推荐阅读
- java - 从cmd运行jar文件时如何在参数中给出sqljdbc_auth.dll的路径?
- oracle - 过程创建时出现编译错误 PL/SQL: ORA-00947: not enough values
- c# - 尝试使用外键从 SQL 表中提取数据时,Visual Studio 未运行
- ios - Swift UITableView scrollToRow 或 setContentOffset 不会滚动到适当的位置
- amazon-web-services - 尝试访问 Amazon Redshift 外部表时出错
- amazon-web-services - 工件,aws buildspec yaml文件中的类型和文件是什么
- android - Android Activity 及其 Fragment 订阅同一个事件
- java - Azure 事件中心降低所有分区的出口吞吐量
- python - Python Shutil 复制命令
- python - 为什么 cron 作业不编译 python 文件?