基于 axios 的封装请求

axios 一个实用的 http 请求库，github 上已介绍其特性、兼容性、安装、简单使用、配置项等。基于上述官方介绍，封装了一下请求方式：

import axios from 'axios'

// 多环境配置
const baseURL = process.env.NODE_ENV === 'development'
  ? 'http://localhost:4000'
  : 'http://localhost:4000'

// 请求拦截器（避免重复请求）
axios.interceptors.request.use(
  config => {
    let requestName = config.data.requestName
    if (requestName) {
      if (axios[requestName] && axios[requestName].cancel) {
        axios[requestName].cancel(`${requestName} 请求被取消`)
      }
      config.cancelToken = new axios.CancelToken(c => {
        axios[requestName] = {}
        axios[requestName].cancel = c
      })
    }
    return config
  }, 
  error => {
    return Promise.reject(error)
  }
)

// 响应拦截器（判断后台返回的状态码）
axios.interceptors.response.use(
  config => {
    return config
  }, 
  error => {
    console.log(error)
    let errMsg = ''

    if (error && error.response) {
      const map = new Map([
        [400, '错误请求'],
        [401, '未受权，请从新登陆'],
        [403, '拒绝访问'],
        [404, '请求错误,未找到该资源'],
        [405, '请求方法未容许'],
        [408, '请求超时'],
        [500, '服务器端出错'],
        [501, '网络未实现'],
        [502, '网络错误'],
        [503, '服务不可用'],
        [504, '网络超时'],
        [505, 'http版本不支持该请求']
        // ...
      ])
      const defaultErrorMsg = `链接错误，服务器返回的状态码为 ${error.response.status}`
      errMsg = map.get(error.response.status) || defaultErrorMsg
    } else {
      errMsg = "链接到服务器失败"
    }

    return Promise.reject(errMsg)
  }
)

// get、post 请求方式地统一封装
export default ({ url, data = {}, params = {}, ...args }) => {
  return new Promise((resolve, reject) => {
    axios({
      baseURL,
      url,
      params,
      data: {
        ...data,
        requestName: url.split('/').slice(-1).pop()
      },
      ...args
    })
      .then(res => resolve(res))
      .catch(err => {
        // 这里能够用全局 UI 函数提醒用户
        reject(err)
      })
  })
}

// 请求举例
/**
   get 请求：
   await request({
      method: 'get',
      url: '/user/12345',
      params: {
        name: 'Bob',
        age: 20
      }
    })

  post 请求：
  await request({
      method: 'post',
      url: '/user/12345',
      data: {
        name: 'Bob',
        age: 20
      }
    })
 */

请求以前作数据转换？建立 axios 示例？axios 全局默认配置... 这些在 github 上官方已给出示例。