React Native中使用axios实现上传进度条及onUploadProgress适配问题

适用场景澄清 #

• 认为onUploadProgress仅能在文件上传场景生效的观点是错误的
• onUploadProgress本质是监听HTTP请求体从客户端发送到服务端的进度，和请求体的内容类型无关：不管你提交的是文件FormData、普通JSON参数，还是对应向MySQL插入数据的业务请求参数，只要请求有明确的请求体载荷，该回调都会正常触发。

提供的代码分析 #

你给出的实现代码如下：

await api
  .post('/embryo-transfer/create', obj, {
    onUploadProgress: (event) => {
      let progressValue = Math.round(
        (event.loaded * 100) / event.total
      );

      setTimeout(function() {
        setProgress(progressValue);
      }, 2000)
    }
  })
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.log(error);
  })

代码存在2个可优化点：

• 进度更新没必要加2秒延迟的setTimeout，会导致进度展示和实际上传进度严重不同步，直接同步调用setProgress(progressValue)即可
• 若你提交的obj参数体积很小，请求体上传会在毫秒级完成，可能会出现进度直接从0跳转到100%的情况，属于正常现象，无需额外处理

内容的提问来源于stack exchange，提问作者João Lucas