如何使用Axios获取非JSON类型的数据？

Axios默认会自动解析响应为JSON格式，要获取图片、文本、二进制文件等非JSON类型数据，只需指定responseType请求配置即可，具体实现如下：

示例：获取PNG图片资源 #

你需要获取的图片属于二进制资源，指定responseType: 'blob'即可，完整代码如下：

import axios from 'axios'

axios.get('https://i.sstatic.net/imahD.png', {
  // 核心配置：指定响应格式为Blob二进制对象
  responseType: 'blob'
}).then(res => {
  // 场景1：页面直接展示图片
  const imgSrc = URL.createObjectURL(res.data)
  const imgEle = document.createElement('img')
  imgEle.src = imgSrc
  document.body.appendChild(imgEle)

  // 场景2：下载图片到本地
  const downloadLink = document.createElement('a')
  downloadLink.href = imgSrc
  downloadLink.download = 'target-image.png'
  downloadLink.click()

  // 释放临时URL，避免内存占用
  URL.revokeObjectURL(imgSrc)
}).catch(err => {
  console.log('请求出错：', err)
})

其他非JSON类型的配置说明 #

如果要获取其他类型的非JSON数据，修改responseType对应值即可：

• 获取普通文本内容：responseType: 'text'，直接通过res.data获取文本字符串
• 获取ArrayBuffer格式二进制数据：responseType: 'arraybuffer'，适用于需要处理二进制流的场景
• 获取各类文档流：同样使用responseType: 'blob'，和图片处理逻辑一致

注意事项 #

• responseType是Axios的专属请求配置项，不需要放在headers请求头中，放错位置不会生效
• 如果请求触发跨域错误，需要目标站点配置CORS跨域允许规则，或者通过代理转发请求解决
• 所有二进制类型的资源都可以用blob格式接收，通用性更强

内容的提问来源于stack exchange，提问作者zonic1k