axios流式响应vue

回答: 在Vue中使用axios进行流式响应的关键代码如下：

const apiurl = '' // 接口地址
this.exportLoading = true
axios.post(apiurl, params, {
  'responseType': 'blob' //设置响应的数据类型为一个包含二进制数据的 Blob 对象，必须设置！！！
}).then((response) => {
  console.log('response', response, response.data.size)
  this.exportLoading = false
  if (response.data) {
    if (response.data.size < 1000) { // 根据文件流的大小判断异常情况
      if (response.data.size == 63) {
        this.$message.warning('查无结果');
        return
      }
      if (response.data.size == 84) {
        this.$message.warning('导出数据超出最大限制值');
        return
      }
    } else {
      const blob = new Blob(\[response.data\], { type: 'application/vnd.ms-excel' })
      const linkNode = document.createElement('a');
      linkNode.style.display = 'none';
      linkNode.href = URL.createObjectURL(blob); //生成一个Blob URL
      document.body.appendChild(linkNode);
      linkNode.click(); //模拟在按钮上的一次鼠标单击
      URL.revokeObjectURL(linkNode.href); // 释放URL 对象
      document.body.removeChild(linkNode);
    }
  }
}).catch((error) => {
  console.log(error);
  this.exportLoading = false
});

这段代码是一个使用axios进行流式响应的示例。首先，我们定义了一个接口地址apiurl，并设置了this.exportLoading为true来表示正在导出数据。然后，我们使用axios.post方法发送POST请求，并设置'responseType'为'blob'，以便获取一个包含二进制数据的Blob对象作为响应。在then回调函数中，我们可以通过response.data来获取响应的数据，并根据数据的大小进行异常情况的判断。如果数据大小小于1000，我们根据不同的大小值显示不同的警告信息。如果数据大小大于等于1000，我们将数据转换为Blob对象，并创建一个隐藏的a标签来生成一个Blob URL，然后模拟鼠标单击该链接来下载文件。最后，我们释放URL对象并移除a标签。如果发生错误，我们将错误信息打印出来，并将this.exportLoading设置为false来表示导出数据完成。
#### 引用[.reference_title]
- *1* *2* [vue中使用axios发送请求及响应结果](https://blog.csdn.net/weixin_57607714/article/details/119683706)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [使用axios完成JS文件流式下载文件](https://blog.csdn.net/qq_44732146/article/details/129150097)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]