前端处理后台返回的数据流

最新推荐文章于 2024-06-05 11:03:48 发布

王宁_

最新推荐文章于 2024-06-05 11:03:48 发布

阅读量2.4k

点赞数

分类专栏：原生js 文章标签： js ajax

本文链接：https://blog.youkuaiyun.com/weixin_50140055/article/details/118384945

版权

原生js 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了前端如何处理后台返回的数据流，特别是当需要在请求头中传递userId时。由于window.location.href无法设置请求头，作者选择了使用Ajax发送GET请求，并在axios拦截器中配置请求头，然后自行解析返回的数据流。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端处理后台返回的数据流（笔记）

正常前端做下载

var params = qs.stringify({
	'token': Cookies.get('token'),
		...this.dataForm
	})
	window.location.href = `${'http://apiURL/XXXXX'}?${params}`

需求是需要在请求头里传一个userId,但是window.location.href 无法完成对请求头的设置（我的理解是window.location是内置BOM对象，并不是我们单独的Ajax请求，它默认请求头我们无法更改）、
所以我发送一个get请求返回的数据流自己来解析代码如下

这里的请求头已经在axios.interceptor.request.use()里配置

 exportHandle(){
      this.$http({ 
              url:'/sys/sysfeedback/export',
              type:'get',
              responseType: 'blob',  // 必须写！！！
          }).then(res=>{
              const link = document.createElement('a')
              let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
              link.style.display = 'none'
              link.href = URL.createObjectURL(blob)
              link.download = '问题反馈' 
              document.body.appendChild(link)
              link.click()
              document.body.removeChild(link)
          })
      }