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

前言

本日，我写了 《Nodejs 实现 Mysql 数据库的全量备份的代码演示》 和 《NodeJS 基于 Koa, 开辟一个读取文件，并返回给客户端文件下载》 两篇文章。在这两篇文章中，我实现了数据库的备份，和提供数据库下载等接口。
但是，在我们给接口加上鉴权以后，直接通过 window.open 大概 axios 的默认配置访问接口，是不能下载的。
由于，我们的下载接口，是必要用户鉴权的，所以排除了 window.open 方法。而我们一样平常配置的 axios 是用来处理接口的 JSON 数据的。所以，这也不支持文件的下载。
怎么办呢？着实，通过一点点的配置，就可以实现了。

AXIOS 后处理实现

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

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

复制代码

调用接口实现文件加载

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

1. request({
2.   url: `${ApiName}/${fileName}`,
3.   method: 'get',
4.   // 指定返回 blob 对象
5.   responseType: 'blob'
6. }).then((response) => {
7.   // 获取文件名
8.   const disposition = response.headers['content-disposition']
9.   let fileName = 'download'
10.   if (disposition) {
11.     fileName = disposition.split('filename=')[1]
12.   }
14.   // 创建下载链接
15.   const blob = new Blob([response.data])
16.   const link = document.createElement('a')
17.   link.href = window.URL.createObjectURL(blob)
18.   link.download = fileName
19.   link.click()
20.   window.URL.revokeObjectURL(link.href)
21. })

复制代码

小结

由于备份数据库文件的下载是必要鉴权的，所以不能直接下载。通过接口哀求的方式实现下载的核心代码就是上面这些了。
可能现在大多数人都直接利用 fetch 来哀求接口了吧，如果是这样的话，这篇文章对你可能就没什么帮助了。我回头有空可以增补一篇。
各位看官，如果本文对你有所帮助，贫苦用您发财的小手点个赞吧！谢谢！