基于 vue 对 axios 封装

Question

像 vue 中进行请求数据的一般有两种，axios 和 fetch

fetch

fetch 不是 ajax 的进一步封装，而是原生 js，没有使用 XMLHttpRequest 对象。用起来也不是很舒服，

1. fetch 只对网络请求报错，对 400，500 都当做成功的请求，服务器返回 400，500 错误码时并不会 reject，只有网络错误这些导致请求不能完成时，fetch 才会被 reject。
2. fetch 默认不会带 cookie，需要添加配置项： fetch(url, {credentials: 'include'})
3. fetch 不支持 abort，不支持超时控制，使用 setTimeout 及 Promise.reject 的实现的超时控制并不能阻止请求过程继续在后台运行，造成了流量的浪费。
4. fetch 没有办法原生监测请求的进度，而 XHR 可以。

axios

axios 是一个基于 Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生 XHR 的封装，只不过它是 Promise 的实现版本，符合最新的 ES 规范。相较而言，axios 既提供了并发的封装，也没有 fetch 的各种问题，而且体积也较小。

axios 封装代码

import axios from 'axios'
import { Message } from 'element-ui' // 消息组建

let _Message = function (params = {}) {
  let _duration = params.duration || 2000
  params.duration = _duration
  Message(params)
}

// 创建axios实例
const http = axios.create({
  baseURL: '', // api的base_url
  /* baseURL: "proxy", */
  // `method` 是创建请求时使用的方法
  method: 'post', // 默认是 post
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  }
})
// 添加请求拦截器
http.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    // const token = utils.LS.get('token')
    // token && (config.headers.Authorization = 'Bearer ' + token);
    const defaultParams = { // 公共参数
      web_access: 'webqSoiKwpWVge4TkaryH6MKvOdceGt7ZMaF20g8H0cnXIweb',
      token: 'kj6tFXDccchnhEqjjQRyyJwVBjXyNgG2GpMVEqYkSeM9E56NbvpG',
    }
    config.data = Object.assign({}, defaultParams, config.data)

    // 接口报错不要axios直接message提示，而自己catch处理的时候
    if (config.data && config.data.noErrorMessage) {
      config.noErrorMessage = true
    }
    return config // 此处切记记得将请求参数return出去
  },
  error => {
    // 对请求错误做些什么

    console.log(error) // for debug
    Promise.reject(error)
  }
)

// 添加响应拦截器
http.interceptors.response.use(
  response => {
    if (response) {
      let { data, config } = response
      // 判断是否需要显示错误message提示
      const noErrorMessage = config.noErrorMessage

      const { code, msg } = data
      if (code !== 0) {
        noErrorMessage || _Message({
          message: msg,
          type: 'error'
        })
        // if (code === 10001) { // 退出登录
        //   utils.LS.remove("token");
        //   window.location = '/login'
        // }
        return Promise.reject(data)
      }

      return data
    } else {
      return {}
    }
  },
  err => {
    // 对响应错误做点什么
    if (err && err.response) {
      switch (err.response.status) {
        case 400:
          err.message = '请求错误'
          break
        case 401:
          err.message = '未授权，请登录'
          break
        case 403:
          err.message = '拒绝访问'
          break
        case 404:
          err.message = `请求地址出错: ${err.response.config.url}`
          break
        case 408:
          err.message = '请求超时'
          break
        case 500:
          err.message = '服务器内部错误'
          break
        case 501:
          err.message = '服务未实现'
          break
        case 502:
          err.message = '网关错误'
          break
        case 503:
          err.message = '服务不可用'
          break
        case 504:
          err.message = '网关超时'
          break
        case 505:
          err.message = 'HTTP版本不受支持'
          break
        default:
      }
      // 判断是否需要显示错误message提示
      const noErrorMessage = err.config.noErrorMessage;
      noErrorMessage || _Message({
        message: err.message,
        type: 'error'
      })
    }
    return Promise.reject(err)
  }
)

export default function (config) {
  return http(config)
}