axios发送异步请求文件，并下载文件到本地

背景：业务上有这样一个需求：

一个列表数据，通过条件查询筛选出目标列表数据，然后将这些目标列表数据导出到本地

后端提供了一个post的异步请求接口，并返回了文件（此处后端逻辑应该是接收到查询条件，去数据库中筛选目标数据，并生成一个excel表格，返回给前端）

axios发送异步post请求常见方式：

axios.request({
  url: '/***/getFile',
  method: 'post',
  data: {page:1},  // 查询文件时的请求参数
})

普通请求发出去，我们接收到返回的数据，一般是一个json的数据结构，拿到这些数据进行处理。

---

那么此时按照普通post请求发出去，得到的返回结果大概长这样

看到这样的返回数据，不知道的还以为是乱码呢，但你想一下，excel的表格在浏览器上肯定是打不开的，出现这样的结果也是情理之中。

那么我们应该怎样实现发送了这个异步请求，拿到数据并下载excel文件到本地呢？

要达到我们想要的效果，首先修改一下请求参数

1. 将文件转为blob格式，方便前端做对应处理

axios.request({
   url: '/api/**/getFiles',
   method: 'post',   // 以post请求为例
   data: {page: 1, pageSize: 20, age: 20},   // 筛选列表的请求参数
   responseType: 'blob',   // 重要， 限制返回的数据结构为blob格式，方便前端做转换
})

2. 此时，前端接收到的数据结果为：
   
3. 前端处理数据

const res = axios.request({
    url: '/api/**/getFiles',
	method: 'post',   // 以post请求为例
	data: {page: 1, pageSize: 20, age: 20},   // 筛选列表的请求参数
	responseType: 'blob', 
}).then(res=>{
	const data = res.data
	let url = window.URL.createObjectURL(data)   // 将二进制文件转化为可访问的url
    var a = document.createElement('a')  
    document.body.appendChild(a)
    a.href = url
    a.download = '宿主列表.xls'
    a.click()   // 模拟点击下载
    window.URL.revokeObjectURL(url)
})