Axios 如何通过配置实现通过接口请求下载文件

前言

今天，我写了《Nodejs 实现 Mysql 数据库的全量备份的代码演示》和《NodeJS 基于 Koa, 开发一个读取文件，并返回给客户端文件下载》两篇文章。在这两篇文章中，我实现了数据库的备份，和提供数据库下载等接口。

但是，在我们给接口加上鉴权以后，直接通过 window.open 或者 axios 的默认配置访问接口，是不能下载的。

因为，我们的下载接口，是需要用户鉴权的，所以排除了 window.open 方法。而我们一般配置的 axios 是用来处理接口的 JSON 数据的。所以，这也不支持文件的下载。

怎么办呢？其实，通过一点点的配置，就可以实现了。

axios

AXIOS 后处理实现

原理也很简单，我们在接口请求的时候，指定返回的是 blob 对象，然后在后处理里，根据这个配置参数判断，直接将服务端返回的数据 return 出去即可。

// 创建 axios
const service = axios.create({baseURL: '/api/v1', // url = base url + request urltimeout: 50000 // request timeout
})
// 前处理这里不展示
// service.interceptors.request.use...
service.interceptors.response.use((response) => {// 如果是文件下载，直接返回 responseif (response.config.responseType === 'blob') {return Promise.resolve(response)}// 其他正常逻辑，我们这里不展示了，每个人的习惯和代码也都不一样·}
)

调用接口实现文件加载

在调用接口的地方，我们指定返回数据类型为 blob 对象，然后用 js 创建一个临时下载链接，从而实现在浏览器中下载文件即可。

request({url: `${ApiName}/${fileName}`,method: 'get',// 指定返回 blob 对象responseType: 'blob'
}).then((response) => {// 获取文件名const disposition = response.headers['content-disposition']let fileName = 'download'if (disposition) {fileName = disposition.split('filename=')[1]}// 创建下载链接const blob = new Blob([response.data])const link = document.createElement('a')link.href = window.URL.createObjectURL(blob)link.download = fileNamelink.click()window.URL.revokeObjectURL(link.href)
})