Axios使用注意事项

1、下载zip文件

 let postZipData = {
        customerNumber: this.state.customerNumber,
        docList: this.state.docList,

    }

    const token = localStorage.getItem('token');
    const axiosConfig = {

        responseType: 'arraybuffer',  // 这个地方需要重点注意下，reponseType是和header同级的，如果不同级，则会出现数据异常现象。
        header: {
            'Content-Type': 'multipart/form-data',
            'Access-Control-Allow-Origin': '*',
            'Authorization': 'Bearer ' + token
        }
    };

    axios.post(SERVER_URL + '/api/user/bills/zip', postZipData, axiosConfig)

        .then((response) => {
            const url = new Blob([response.data],{
                type:'application/zip'
            });
            const link = document.createElement('a');
            link.href = url;
            link.setAttribute('download', 'file.zip');
            document.body.appendChild(link);
            link.click();
        })
    console.log('get the zip')
}

2、params: p; // 该属性为即将提交的requestBody,同时该属性会自动添加到url的后面?key=value&key=value
data: formData; // 该属性为即将提交的formData
3、加载二进制文件

const url = BASE_URL + '/api/wxpay/getOrderPayAcode'
    const formData = new FormData()
    formData.append('id', id)
    return new Promise(function (resolve, reject) {
      axios.post(url, formData, {
        responseType: "arraybuffer",
      })
        .then(function (data) {
          const res = 'data:image/png;base64,'
            + btoa(new Uint8Array(data.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
          resolve(res)
        })
        .catch(function (error) {
          reject(error)
        })
    })

4、上传文件
如果使用的formData，则axios会 自动将header设置为‘content-type：multipart/form-data’

notice:Mock模块的使用会使responseType:'blob'失效

https://segmentfault.com/q/1010000014704618/

源码阅读

https://juejin.im/post/5d3bc534e51d4555fc1acd7d

5、下载excel文件

const data = await downloadData(this.searchParams) // responseType：'blob'
      const blob = new Blob([data], { type: 'application/vnd.ms-excel;charset=utf-8' })
      const url = window.URL.createObjectURL(blob)
      // 通过创建a标签实现
      const link = document.createElement('a')
      link.href = url
      // 对下载的文件命名, 如果后端返回名称出现乱码, 需要后端编码一下.
      link.download = 'data.xlsx'
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)