Axios http请求拦截、封装

技术栈：Axios + JavaScript

简介

在实际项目开发中，请求后端接口都需要去调用http，目前常用的基于promise的网络请求库。但是实际应用时，还是需要进行封装处理，配置ip、超时时间、请求拦截、响应拦截等操作。
此处涉及以下几个方面：

1. 基本配置
2. 参数处理
3. request拦截器
4. response拦截器

实现

在文件头引入axios和一些需要的数据，比如errorCode等，在文件末尾导出service。

基本配置

常用的基本配置有以下内容：

axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8' // 自定义请求头

// 创建axios实例
const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 30000, // 超时时间
  maxContentLength: 2000, // 允许的HTTP响应内容的最大字节数
  withCredentials: false, // 跨域请求时是否需要使用凭证
  maxBodyLength: 2000, // 定义允许的http请求内容的最大字节数
  maxRedirects: 5, // 最大重定向次数
  decompress: true, // response body 是否被压缩
})

参数处理

在请求接口时，往往为了删除无用的参数，比如某些 null 和 ‘’，需要进行进一层过滤。这里提出来单独记录。

let deleteEmptyProp = function(json) {
  if (typeof(json) === 'string') {
    return json
  } else {
    for (var item in json) {
      if (typeof json[item] === "object") {
        if (json[item] === null) { // 删除null字段
          delete json[item];
        } else {
          deleteEmptyProp(json[item])
        }
      } else {
        if (typeof json[item] === 'string') {
          if (json[item].trim() === '') { // 删除空字符串（视实际而定）
            delete json[item];
          }
        }
      }
    }
    return json
  }
}

request拦截器

在请求时拦截，加上部分数据，进行参数处理操作。比如当前语言环境、token等。

// request拦截器
service.interceptors.request.use(config => {
  // 是否设置 token
  const isToken = (config.headers || {}).isToken === true 
  // 设置了token且有token
  if (isToken && getToken()) {
    config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token
  }
  config.headers.language = store.state.user.language || navigator.language;
  return deleteEmptyProp(config)
}, error => {
    Promise.reject(error)
})

response拦截器

接口请求的结果返回后，根据请求状态拦截处理，常用于一些错误、登录失效等。

// 响应拦截器
service.interceptors.response.use(
  res => { // 接口请求成功
    // 未设置状态码则默认成功状态
    const code = res.data.code || 200;
    // 获取接口msg信息
    const msg = errorCode[code] || res.data.msg || errorCode['default']
  /**code码处理 */
    if (code === 100102000002) {
     // 登录超时等 TODO:
    } else if (code === 500) {
      // TODO: 后端错误
      return Promise.reject(new Error(msg))
    } else if (code !== 200) {
      // TODO: 其他情况
      return Promise.reject('error')
    } else {
      return res.data
    }
  },
  // 接口请求失败（无网、超时等）
  error => {
    console.log('err' + error)
    let { message } = error;
    // TODO: 错误弹窗提示等
    return Promise.reject(error)
  }
)