axios 二次封装的两个小点(文件下载和 put 请求的 params 传参)

一、使用 axios 下载文件

1、创建一个对象，用于配置接口信息

  let myObj={
    url: process.env.VUE_APP_BASE_API + api/studentList',
    method: 'get',
    fileName: 'studengListFile',
    params:{接口的params参数}
  }

2、封装一个 axios 下载文件的方法

exportMethod(data) {
  axios({
    method: data.method,
    url: `${data.url}`,
    responseType: 'blob',
    params:data.params?data.params:null
  }).then((res) => {
    if(res.data.type=='application/octet-stream'){
      const link = document.createElement('a')
      let blob = new Blob([res.data], {type: 'application/vnd.ms-excel'})
      link.style.display = 'none'
      link.href = URL.createObjectURL(blob)
      link.download = data.fileName //下载的文件名
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
      return;
    }
    var reader=new FileReader()
    reader.onload=e=>{
      let res=JSON.parse(e.target.result);
      let error_html="
"+(i18n.tc(res.key) || 'Error');
      error_html+="
";
      let msg= Message({
        dangerouslyUseHTMLString:true,
        message: error_html,
        type: 'error',
        duration: 5 * 1000
      })
    }
    reader.readAsText(res.data)

  }).catch(error => {
    console.log('接口调用失败:',error)
  })
}

3、调用方法，并传入前面配置的接口对象

exportMethod(myObj)

二、PUT 请求 params 传参包含数组的处理办法

当 params 参数中包含有值为数组的属性时，其在URL中的格式如下：
....&ArrName[]=val1&ArrName[]=val2&...
而接口需要的参数格式往往如下:
...&ArrName=val1&ArrName=val2&...
可以在封装中添加 paramsSerializer 配置项，示例如下：

          request({
            url: '/api/userList',
            method: 'put',
            params: paramsObj,
            // params 传参数组格式处理
            paramsSerializer: function (params) {
              let result = [];
              for (let field in params) {
                if (params[field] === undefined || params[field] === null) {
                  result.push(`${field}=`);
                  continue
                }
                if (Array.isArray(params[field])) {
                  result.push(params[field].map(_ => `${field}=${_}`).join("&"));
                } else {
                  result.push(`${field}=${encodeURIComponent(params[field])}`);
                }
              }
              return result.join("&");
            }

          }).then(responce=>{
        ......
    })