axios-使用

下载

// 下载模版
const downloadTemp = (params) => {
  return request({
    url: '/device/mgt/batchCreate/download/template.xlsx', // 文件格式,支持 csv,xlsx
    method: 'get',
    // headers:{
    //   'Content-Type':'application/x-www-form-urlencoded'
    // },
    responseType: 'blob', // 必须要加 不加的话会出问题 转化失败或者请求乱码 下面的代码都无效
  })
}




/**
 * 下载模板
 */
downloadTemp (e) {
  e.stopPropagation()
  downloadTemp().then(res => {
    console.log('下载模板返回的res', res)
    /**
     * 不指定responseType的话，返回直接是文件流，type是undefined,下载的文件类型为txt
     * 指定responseType，返回是Blob，此时如果new Blob不指定类型，下载文件类型为 txt
     * .xlsx  type为：application/vnd.ms-excel
     * .xls  application/vnd.ms-excel
     * .cvs: application/csv
     */
    console.log('下载模板返回的res.type', res.type) //
    // 构造一个blob对象来处理数据，并设置文件类型
    const blob = new Blob([res], { type: res.type })
    // const blob = new Blob([res])
    const eLink = document.createElement('a') // 生成一个a标签
    eLink.download = '设备批量导入模板' //指定下载文件名
    // a.setAttribute('download', '设备批量导入模板')
    eLink.style.display = 'none'// 设置元素样式不可⻅
    eLink.href = URL.createObjectURL(blob) // 创建下载的链接,指定下载链接
    document.body.appendChild(eLink) //把a标签加到页面中
    eLink.click() //触发a标签下载
    const a = URL.revokeObjectURL(eLink.href)  // 释放掉blob对象
    document.body.removeChild(eLink) // 下载完成移除元素

  })
}
},

使用原生的XHR发起请求：

downLoadFiles (token) {
  let _this = this
  let xhr = new XMLHttpRequest()
  let downUrl = `${url.API_DEVELOP}/xx/deviceId/${this.head.id}`
  xhr.open('GET', downUrl, true)
  
  xhr.responseType = 'blob'
  xhr.withCredentials = true
  xhr.setRequestHeader('token', token)

  // 成功：
  xhr.onload = function () {
    console.log('xhr.response:', xhr.response)
    const blob = new Blob([xhr.response])
    const blobUrl = window.URL.createObjectURL(blob)
    let a = document.createElement('a')
    a.download = `状态值模板.xlsx`
    a.href = blobUrl
    a.click()
  }
	
  // 发送
  xhr.send()
},

axios 中配置withCredentials

https://blog.csdn.net/qq_34707272/article/details/119114615
https://blog.csdn.net/JIANYMN/article/details/123634100

• withCredentials 有什么用?

跨域请求是否提供凭据信息(cookie、HTTP认证及客户端SSL证明等)，也可以简单的理解为，当前请求为跨域类型时是否在请求中协带cookie。

• 配置withCredentials:

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // 环境变量base接口地址 url = base url + request url
  withCredentials: true, // 跨域请求时发送Cookie
  timeout: 60000, // 请求超时
  headers: {
    "Content-Type": "application/json; charset=UTF-8;"
  }
});

或者：

axios.defaults.withCredentials = true
// 后端如果没开启的话，也需要开启下

需要注意是，当配置了xhr.withCredentials = true时，必须在后端增加 response 头信息Access-Control-Allow-Origin，且必须指定域名，而不能指定为*。

axios配置中transformRequest和transformResponse的作用

这两个比较底层，transformRequest是发请求前的处理，自动识别携带请求头，比如application/json，transformResponse是自动处理http返回数据，比如默认JSON parse。

interceptor是处理config和返回的data，同时可以捕获处理异常。interceptor之间是异步串联执行，transform函数之间是同步串联执行，

interceptor可以实现transform这两个函数的功能，transform不能实现interceptor。为什么要有transform这两个函数，可能是设计模式，

transformRequest: [function (data, headers) {
    // 对 data 进行任意转换处理
    return data;
  }],

transformResponse: [function (data) {
    // 对 data 进行任意转换处理
    return data;
  }],