Axios 二次封装

文件index.js

import axios from 'axios'
import { Modal } from 'antd'
import { HashRouter } from 'react-router-dom'
// Loading组件
import Loading from '../utils/loading'

// http request 请求拦截器
axios.defaults.timeout = 1000 * 60 * 60
axios.defaults.baseURL = '/'

//路由跳转
const { history } = new HashRouter()

// 取消重复的ajax请求
let pending = [] //声明一个数组用于存储每个ajax请求的取消函数和ajax标识
let cancelToken = axios.CancelToken
let removePending = ever => {
  for (let p in pending) {
    if (pending[p].key === ever.url + '_' + ever.method) {
      //当当前请求在数组中存在时执行函数体
      pending[p].cancel() //执行取消操作
      pending.splice(p, 1) //把这条记录从数组中移除
    }
  }
}

// http request 拦截器
axios.interceptors.request.use(
  config => {
    Loading.init()
    const { url, headers, method } = config
    config.headers['X-Requested-With'] = 'XMLHttpRequest'
    let mth = method.toLocaleString()
    // 兼容IE method方法 后端接收'_method'参数
    if (['put', 'delete'].indexOf(mth) > -1) {
      config.params
        ? (config.params['_method'] = mth)
        : (config.params = { _method: mth })
      config.method = 'post'
    }
    // 过滤接口访问是否带token权限  --此处可忽略
    let ignore = ['/login', '/forget']
    if (ignore.indexOf(url) < 0) {
      let token = userToken // TODO 接口访问token
      if (token) {
        headers['token'] = token
      } else {
        // 获取token失败 退出登录
        Modal.warning({
          title: '提示',
          content: '账号异常，请重新登录！',
          okText: '确定',
          onOk: () => {
            history.replace({ pathname: '/login' })
          }
        })
        return false
      }
    }
    removePending(config) //在一个ajax发送前执行一下取消操作
    config.cancelToken = new cancelToken(cancel => {
      // 这里的ajax标识key是用【请求地址_请求方式】拼接的字符串，当然你可以选择其他的一些方式
      pending.push({ key: config.url + '_' + config.method, cancel })
    })
    // 兼容IE 防止请求缓存，增加时间戳
    config.url +=
      (config.url.indexOf('?') > -1 ? '&' : '?') + '_t=' + new Date().getTime()
    return config
  },
  err => {
    Loading.close()
    return Promise.reject(err)
  }
)

// http response 拦截器
axios.interceptors.response.use(
  response =>
    new Promise(resolve => {
      // 在一个ajax响应后再执行一下取消操作，把已经完成的请求从pending中移除
      removePending(response.config)
      // 根据接口定义结构判断是否请求成功
      if (!response.data.success) {
        Modal.warning({
          title: '提示',
          content: response.data.describe,
          centered: true,
          okText: '确定',
          onOk: () => {
            history.replace({ pathname: '/' })
          }
        })
      }
      Loading.close()
      resolve(response)
    }),
  error => {
    Loading.close()
    // TODO 此处可增加异常码拦截跳转
    if (error.response) {
      switch (error.response.status) {
        case 404:
          // TODO
          break
        case 500:
          // TODO
          break
        // ......
        default:
      }
    } else if (error.message === 'Network Error') {
      Modal.error({
        title: '提示',
        content: error.message + ' 请确认网络连接是否正常！',
        okText: '再试一次',
        onOk: () => {
          window.location.reload()
        }
      })
    }
    return Promise.reject(error)
  }
)

export default axios