Axios中的onDownloadProgress函数获取文件流

推荐：axios 请求中断和请求重试
关注博主微信公众号【前端成长营】以后也会持续同步…

微信扫码体验一下 （说不定哪天你就用得上）

假如
你有一个项目关于聊天的 ，
后端接口是个流的的形式返回给前端 ，
文字会不停的显示的对话框里直到完成。

那么在 请求接口中
我们要使用onDownloadProgress函数 （在接口返回子发生变化事都会被触发）

  var  controller = new AbortController() 
       let _res = await facth(
            {
              signal: controller.signal, 
              onDownloadProgress: (data) => {
                const xhr = data.target
                const { responseText } = xhr
                let text = responseText.split('\n').filter(v => v)
              }
            }
          )

controller = new AbortController()

如果接口中涉及到 取消或者停止需求， 接口中需要传入 signal: controller.signal

案例2

以下是一个简单的onDownloadProgress函数示例，用于在Web开发中处理标签的download事件：

function onDownloadProgress(event) {
  if (event.lengthComputable) {
    // 如果可以计算总数据量
    var percentComplete = (event.loaded / event.total) * 100;
    console.log('下载进度: ' + percentComplete.toFixed(2) + '%');
  } else {
    // 如果无法计算总数据量，通常是因为数据是流式的
    console.log('下载中...');
  }
}

// 使用示例
var downloadLink = document.querySelector('#downloadLink');
downloadLink.addEventListener('download', onDownloadProgress);

在上面的示例中，onDownloadProgress 函数会在每次下载进度发生变化时被调用。它检查event.lengthComputable属性来确定是否可以计算总数据量。如果可以，它就计算已下载数据的百分比并打印出来；如果不可以，它就简单地打印一个表示下载仍在进行的消息。

请注意，不是所有的下载操作都会触发download事件，这取决于浏览器和下载的具体实现。此外，onDownloadProgress函数的确切参数和行为也可能因环境和框架的不同而有所差异。因此，在编写onDownloadProgress函数时，您应该查阅相关文档以了解如何在您的特定环境中使用它。