上传和下载进度

在实际开发中我们经常遇到这么一个需求，在上传文件的时候，要展示它的上传进度；接口请求后台数据时，有时候也要展示数据返回的进度，因此这一节我们要实现上传和下载进度这两个功能。

我们在 xhr.js 文件中添加 下载处理进度 和 上传处理进度 的监听器，它们的逻辑非常简单，就是我们要传入自定义的上传和下载处理函数作为监听器的回调函数。

module.exports = function xhrAdapter(config) {
  return new Promise(function dispatchXhrRequest(resolve, reject) {
    // 省略以上部分代码，可以参考前面的内容或最后一章提供的源码资料

    //添加下载处理进度事件
    if (typeof config.onDownloadProgress === "function") {
      request.addEventListener("progress", config.onDownloadProgress);
    }

    // 添加上传处理进度事件
    if (typeof config.onUploadProgress === "function" && request.upload) {
      request.upload.addEventListener("progress", config.onUploadProgress);
    }

    // ....略
  });
};

在实际请求中添加上传和下载进度处理函数的方式如下所示：

axios.get({
  url: "/test",
  // 允许为上传处理进度事件
  onUploadProgress: function (progressEvent) {
    // 对原生进度事件的处理
  },

  // 允许为下载处理进度事件
  onDownloadProgress: function (progressEvent) {
    // 对原生进度事件的处理
  },
});