Axios 基础使用

文件下载

在使用 Axios 进行文件下载时,我们需要从响应的headers中获取文件的相关信息。下面分别介绍使用 POST 和 GET 方法进行文件下载的示例。

使用 POST 方法下载文件

/api/download.js
export function issuedDailyD(data) {
  return request({
    responseType: 'blob',
    headers: { 'content-type': 'application/x-www-form-urlencoded' },
    url: '/issuedDaily/download',
    method: 'post',
    data
  })
}

在上面的代码中,我们将responseType设置为'blob',表示期望服务器返回二进制数据。同时,在headers中指定'content-type'为'application/x-www-form-urlencoded',告诉服务器请求体的数据格式。

使用 GET 方法下载文件

/api/download.js
export function invoiceDownload(data) {
  return request({
    responseType: 'blob',
    url: '/invoice/issueinfo/export/file',
    method: 'get',
    params: data
  })
}

使用 GET 方法下载文件与 POST 方法类似,只是将请求数据放在params参数中传递。

在下载文件成功后,我们还需要将响应的二进制数据转换为文件并触发浏览器的下载。可以使用以下的resolveBlob函数来实现:

/utils/download.js
export function resolveBlob(res, mimeType, fileName) {
  if (!res) {
    return
  }

  const aLink = document.createElement('a')
  fileName = fileName.replace(/\"/g, '')
  aLink.href = window.URL.createObjectURL(new Blob([res], { type: mimeType }))
  aLink.setAttribute('download', fileName)
  document.body.appendChild(aLink)
  aLink.click()
  document.body.removeChild(aLink)
}

resolveBlob函数接收三个参数:

• res: 响应的二进制数据
• mimeType: 文件的 MIME 类型
• fileName: 下载文件的名称

函数内部会创建一个<a>标签,将二进制数据转换为 Blob 对象并设置为<a>标签的href属性。然后设置download属性为文件名,模拟点击下载链接,最后移除创建的<a>标签。

使用 FormData 传递数据

GET 请求

/api/invoice.js
export function invoiceExport(data) {
  return request({
    url: '/invoice/issueinfo/export',
    method: 'get',
    params: data
  })
}

对于 GET 请求,我们直接将请求数据放在params参数中即可。

POST 请求

/api/invoice.js
import qs from 'qs'

export function queryInvoiceInformation(data) {
  return request({
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    url: '/invoice/issueinfo/manage',
    method: 'post',
    data: qs.stringify(data)
  })
}