每天学习一个vue插件(27)——axios

我已经一无所有了，至少看到眼前有东西掉下，还是想要把它捡起来的

前言

1.介绍

instance 实例

const instance = axios.create({
  baseURL: process.env.NODE_ENV, // node环境配置
  timeout: 5000, // 请求的超时时间
  withCredentials: true // 允许携带cookie
})

config

url 请求地址

{
  url: '/product/list'
}

method 请求方法

{
  method: 'post'
}

headers 请求头

{
  // 默认 json
  headers: {'content-type': 'application/json;charset=UTF-8'}

  // form 表单
  headers: {'content-type': 'application/x-www-form-urlencoded'}
  
  // form-data 流文件
  headers: {'Content-Type': 'multipart/form-data'}
}

data 请求参数

{
  // 默认 json
  data: {id: 123}
  
  // form 表单
  data: qs.stringify({id: 123})
}

responseType 数据类型

{
  // 默认 json
  responseType: 'json'
  
  // blob 类型
  responseType: 'blob'
}

cancelToken 取消请求

{
  cancelToken: new CancelToken(function (cancel) {
  })
}

interceptors

request

const m = {}
instance.interceptors.request.use(
  req => {
    // 取消请求
    m.has(req.url) && m.delete(req.url)

    // 缓存新的 cancel
    req.cancelToken = new CancelToken(function (cancel) {
      m.set(req.url, cancel)
    })

    // 配置token
    req.headers.Authorization = store.state.login.token

    return req
  },
  err => {
    return Promise.reject(err)
  }
)

response

instance.interceptors.response.use(
  res => {
    // 移除 cancel
    m.has(res.config.url) && m.delete(res.config.url)

    let data = {}

    switch (res.status) {
      case 200:
        if (res.data.errCode === '000000') {
          data = res.data instanceof Blob ? res.data : res.data.data
        } else {
          data = res.data
          !data.errCode && (data.errCode = 'xxxxxx')
          !data.errMsg && (data.errMsg = '系统错误')
        }
        break
      case 301:
        data.errMsg = '永久性重定向'
        break
      case 302:
        data.errMsg = '临时性重定向'
        break
      case 304:
        data.errMsg = '服务器资源未改变'
        break
      case 400:
        data.errMsg = '请求头错误'
        break
      case 403:
        data.errMsg = '禁止访问'
        break
      case 404:
        data.errMsg = '访问的页面不存在'
        break
      case 405:
        data.errMsg = '请求类型或参数错误'
        break
      case 502:
        data.errMsg = '无效网关'
        break
      case 503:
        data.errMsg = '服务器暂时性错误'
        break
    }

    return Promise.resolve(data)
  },
  err => {
    m.has(res.config.url) && m.delete(res.config.url)

    if (axios.isCancel(err)) {
      // 中断promise链接
      return Promise.resolve(err.message.msg)
    } else {
      // 把错误继续向下传递
      return Promise.reject(err)
    }
  }
)

使用

安装

npm i axios -S

请求

json

export function post (url, data = {}) {
  return instance({
    method: 'post',
    url,
    data
  })
}

form 表单

export function postQS (url, data = {}) {
  return instance({
    method: 'post',
    url,
    data: qs.stringify(data),
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
    }
  })
}

文件上传

export function upload (url, data = {}) {
  return instance({
    method: 'post',
    url,
    data,
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  })
}

文件下载

export function download (url, data = {}) {
  return instance({
    method: 'post',
    url,
    data,
    responseType: 'blob'
  }).then(res => {
    const objectUrl = window.URL.createObjectURL(res.data)
    const fileName = window.decodeURI(
      res.headers['content-disposition'].split('=')[1], 
      "UTF-8"
    )
    // 创建a链接
    const a = document.createElement('a')
    a.href = objectUrl
    a.target = '_blank'; // 兼容chrome65
    a.download = fileName

    // 自触发事件
    a.click()
  })
}

图片展示

export function download (url, data = {}) {
  return instance({
    method: 'post',
    url,
    data,
    responseType: 'blob'
  }).then(res => {
      const bolb = res.data

      // 转化base64
      const reader = new FileReader()
      reader.onload = e =>{
        const base64 = e.target.result
        
        // this.imgSrc = base64
        data.callback && data.callback(base64)
      }
      reader.readAsDataURL(bolb)
  })
}

3.注意

1.form格式会自动转码，传输后会自动解码

尾声

不知怎的，打开了微信，一眼看到了你，不由自主的跟你发了句晚安

晚安 ^_^

参考链接

• axios 中文文档

往期回顾

• 每天学习一个vue插件(1)——better-scroll
• 每天学习一个vue插件(2)——vue-awesome-swiper
• 每天学习一个vue插件(3)——eslint + prettier + stylelint
• 每天学习一个vue插件(4)——v-viewer
• 每天学习一个vue插件(5)——postcss-pxtorem
• 每天学习一个vue插件(6)——momentjs
• 每天学习一个vue插件(7)——hammerjs
• 每天学习一个vue插件(8)——mcanvas
• 每天学习一个vue插件(9)——MathJax
• 每天学习一个vue插件(10)——Vue-APlayer
• 每天学习一个vue插件(11)——vue-drag-resize
• 每天学习一个vue插件(12)——vue-fullpage
• 每天学习一个vue插件(13)——html2canvas
• 每天学习一个vue插件(14)——vue-pull-to
• 每天学习一个vue插件(15)——vue-content-placeholders
• 每天学习一个vue插件(16)——vue-video-player
• 每天学习一个vue插件(17)——js-file-download
• 每天学习一个vue插件(18)——js-audio-recorder
• 每天学习一个vue插件(19)——vue-treeselect
• 每天学习一个vue插件(20)——progressbar
• 每天学习一个vue插件(21)——ProvidePlugin
• 每天学习一个vue插件(22)——vue-router
• 每天学习一个vue插件(22)——vue-router
• 每天学习一个vue插件(23)——url-loader
• 每天学习一个vue插件(24)——drivejs
• 每天学习一个vue插件(25)——vuex-persist
• 每天学习一个vue插件(26)——uglifyjs-webpack-plugin