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 来请求接口了吧,如果是这样的话,这篇文章对你可能就没什么帮助了。我回头有空可以补充一篇。

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

相关推荐
一个很帅的帅哥10 小时前
JavaScriptAJAX异步请求:XHR、Fetch与Axios对比
javascript·axios·xmlhttprequest·fetch
qczg_wxg10 小时前
王学岗Axios的data加密报错的问题
axios
用户84913717547163 天前
vue-element-plus-admin 第5期|Axios实战:HTTP 请求与数据处理
前端框架·axios·前端工程化
我是哈哈hh7 天前
【AJAX项目】黑马头条——数据管理平台
前端·javascript·ajax·前端框架·axios·proxy模式
\光辉岁月/9 天前
Axios基本使用
javascript·axios
今禾10 天前
99% 的前端都在用,但你真的懂 Axios 吗?
前端·性能优化·axios
脱离语言16 天前
前端下载文件并按GBK编码解析内容
前端·axios
梁辰兴21 天前
企业培训笔记:axios 发送 ajax 请求
前端·笔记·ajax·vue·axios·node
温贝21 天前
基于axios的http请求封装,支持数据缓存
http·axios
Kier2 个月前
🚀 前端实战:优雅地实现一个通用Blob文件下载方法
前端·javascript·axios