如何在 React 中统一处理 Axios 上传和下载进度显示？

Question

如何统一给上传和下载的请求提供进度显示?

请求使用的是 axios,可以通过 onUploadProgress 和 onDownloadProgress 进行进度获取,但是如果在 base 的 axios 实例上添加这些回调,这些进度数据不好在像 react 这些框架中渲染出来。

但是如果像这样使用,又需要在每次调用中添加进度的回调。

function rc() {
  useEffect(() => {
     const res = getSomeApi({ onUploadProgress: () => {}})
  }, [])
}

一般这种情况应该怎么处理比较好

Answer 1

只能在调用时添加回调，否则的话它根本不知道该怎么通知页面重新渲染。

其实你把这个过程想清楚，就知道该怎么做了：

1. 当上传下载进度时，需要通知某个东西：该重新渲染了
2. 负责重新渲染的代码，需要得到通知
3. 两点都满足，就能实现进度条效果

跟框架无关，这些条件都必须满足才行。