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

前言

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

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

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

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

AXIOS 后处理实现

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

js 复制代码

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

调用接口实现文件加载

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

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 = fileName
  link.click()
  window.URL.revokeObjectURL(link.href)
})

小结

因为备份数据库文件的下载是需要鉴权的，所以不能直接下载。通过接口请求的方式实现下载的核心代码就是上面这些了。

可能现在大多数人都直接使用 fetch 来请求接口了吧，如果是这样的话，这篇文章对你可能就没什么帮助了。我回头有空可以补充一篇。

各位看官，如果本文对你有所帮助，麻烦用您发财的小手点个赞吧！谢谢！