欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 教育 > 高考 > Axios 如何通过配置实现通过接口请求下载文件

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

2025/11/12 2:12:05 来源:https://blog.csdn.net/FungLeo/article/details/148318981  浏览:    关键词: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)
})

小结

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

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

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

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词