axios二次封装-高阶

取消重复请求

说起这个重复请求，感觉用到得比较少，心理总有怎么一种想法就算多请求一次又能怎么样，服务器会塌吗？页面会挂吗？明显不会嘛，不要大惊小怪，哈哈哈。再说没事怎么会多发重复的请求呢？不可能的。

而且做取消重复请求操作，其实取消后的请求还是有可能会到达了后端，只是前端浏览器不处理而已，但是呢，哎，我们还是得做做工作，不，非做不可，所谓以防万一，严谨，程序猿需要严谨！！！

发生重复请求的场景一般有这两个：

• 快速连续点击一个按钮，如果这个按钮未进行控制，就会发出重复请求，假设该请求是生成订单，那么就有产生两张订单了，这是件可怕的事情。当然一般前端会对这个按钮进行状态处理控制，后端也会有一些幂等控制处理策略啥的，这是个假设场景，但也可能会发生的场景。
• 对于列表数据，可能有tab状态栏的频繁切换查询，如果请求响应很慢，也会产生重复请求。当然现在很多列表都会做缓存，如Vue中用 <keep-alive />。

如何取消一个已发送的请求

在开始正题前，我们要先来了解一下，如何取消一个已发送的请求，不知道铁汁们对JS中的 XMLHttpRequest 对象是否了解？(不知道也当你知道了) 你只要知道axios底层就是依赖于它的就行，也就是它的二次封装，那我们对axios再次封装，也就是三次封装？套娃？

XMLHttpRequest 对象是我们发起一个网络请求的根本，在它底下有怎么一个方法 .abort()，就是中断一个已被发出的请求。

那么axios自然也有对其的相关封装，就是 CancelToken，文档上介绍的用法：

var CancelToken = axios.CancelToken;
var cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // executor 函数接收一个 cancel 函数作为参数
    cancel = c;
  })
});

// 取消请求
cancel();

简单理解就是通过 new axios.CancelToken()给每个请求带上一个专属的CancelToken，之后会接收到一个cancel() 取消方法，用于后续的取消动作，所以我们需要对应的存储好这个方法。

完整代码

import axios from 'axios'
import { message as Message } from 'ant-design-vue'
import router from '@/router/index'
import { useLoading } from '@/hooks/useLoading'
​
const { openLoading, closeLoading } = useLoading()
const getTokenAUTH = () => {
  if (
    localStorage.getItem('token') &&
    localStorage.getItem('token') !== 'null'
  ) {
    const token = localStorage.getItem('token') || ''
    return token
  } else {
    return undefined
  }
}
​
const pendingMap = new Map()
const LoadingInstance = {
  _count: 0
}
function myAxios(axiosConfig, customOptions) {
  const service = axios.create({
    // baseURL: 'http://localhost:8888', // 设置统一的请求前缀
    timeout: 360000 // 设置统一的超时时长
  })
​
  // 自定义配置
  let custom_options = Object.assign(
    {
      repeat_request_cancel: true, // 是否开启取消重复请求, 默认为 true
      loading: false, // 是否开启loading层效果, 默认为false
      reduct_data_format: true, // 是否开启简洁的数据结构响应, 默认为true
      error_message_show: true, // 是否开启接口错误信息展示,默认为true
      code_message_show: false // 是否开启code不为200时的信息提示, 默认为false
    },
    customOptions
  )
​
  // 请求拦截
  service.interceptors.request.use(
    config => {
      removePending(config)
      custom_options.repeat_request_cancel && addPending(config)
      // 创建loading实例
      if (custom_options.loading) {
        LoadingInstance._count++
        if (LoadingInstance._count === 1) {
          openLoading()
        }
      }
      // 自动携带token
      if (getTokenAUTH() && typeof window !== 'undefined') {
        config.headers.Authorization = `bearer ${getTokenAUTH()}`
        config.headers.satoken = getTokenAUTH()
      }
      config.headers['ProId'] = window.proId
      return config
    },
    error => {
      closeLoadingInstance()
      return Promise.reject(error)
    }
  )
​
  // 响应拦截
  service.interceptors.response.use(
    response => {
      removePending(response.config)
      custom_options.loading && closeLoadingInstance(custom_options) // 关闭loading
      if (
        custom_options.code_message_show &&
        response.data &&
        response.data.code !== '200'
      ) {
        debugger
        Message.error(response.data.message)
        return Promise.reject(response.data) // code不等于0, 页面具体逻辑就不执行了
      }
      return custom_options.reduct_data_format ? response.data : response
    },
    error => {
      error.config && removePending(error.config)
      custom_options.loading && closeLoadingInstance(custom_options) // 关闭loading
      custom_options.error_message_show && httpErrorStatusHandle(error) // 处理错误状态码
      return Promise.reject(error) // 错误继续返回给到具体页面
    }
  )
​
  return service(axiosConfig)
}
​
export default myAxios
​
/**
 * 处理异常
 * @param {*} error
 */
function httpErrorStatusHandle(error) {
  debugger
  // 处理被取消的请求
  if (axios.isCancel(error))
    return console.warn('请求的重复请求：' + error.message)
  let message = ''
  if (error && error.response) {
    debugger
    switch (error.response.status) {
      case 302:
        message = '接口重定向了！'
        break
      case 400:
        message = '参数不正确！'
        break
      case 401:
        message = '您未登录，或者登录已经超时，请先登录！'
        router.replace({
          path: '/login',
          query: {
            redirect: router.currentRoute.fullPath
          }
        })
        break
      case 403:
        message = '您没有权限操作！'
        break
      case 404:
        message = `请求地址出错: ${error.response.config.url}`
        break
      case 408:
        message = '请求超时！'
        break
      case 409:
        message = '系统已存在相同数据！'
        break
      case 500:
        message = '服务器内部错误！'
        break
      case 501:
        message = '服务未实现！'
        break
      case 502:
        message = '网关错误！'
        break
      case 503:
        message = '服务不可用！'
        break
      case 504:
        message = '服务暂时无法访问，请稍后再试！'
        break
      case 505:
        message = 'HTTP版本不受支持！'
        break
      default:
        message = '异常问题，请联系管理员！'
        break
    }
  }
  if (error.message.includes('timeout')) message = '网络请求超时！'
  if (error.message.includes('Network'))
    message = window.navigator.onLine ? '服务端异常！' : '您断网了！'
​
  Message.error(error.response?.data?.message || message)
}
​
/**
 * 关闭Loading层实例
 * @param {*} _options
 */
​
function closeLoadingInstance(_options) {
  if (_options.loading && LoadingInstance._count > 0) LoadingInstance._count--
  if (LoadingInstance._count === 0) {
    closeLoading()
  }
}
/**
 * 储存每个请求的唯一cancel回调, 以此为标识
 * @param {*} config
 */
function addPending(config) {
  const pendingKey = getPendingKey(config)
  config.cancelToken =
    config.cancelToken ||
    new axios.CancelToken(cancel => {
      if (!pendingMap.has(pendingKey)) {
        pendingMap.set(pendingKey, cancel)
      }
    })
}
​
/**
 * 删除重复的请求
 * @param {*} config
 */
function removePending(config) {
  const pendingKey = getPendingKey(config)
  if (pendingMap.has(pendingKey)) {
    const cancelToken = pendingMap.get(pendingKey)
    cancelToken(pendingKey)
    pendingMap.delete(pendingKey)
  }
}
​
/**
 * 生成唯一的每个请求的唯一key
 * @param {*} config
 * @returns
 */
function getPendingKey(config) {
  let { url, method, params, data } = config
  if (typeof data === 'string') data = JSON.parse(data) // response里面返回的config.data是个字符串对象
  return [url, method, JSON.stringify(params), JSON.stringify(data)].join('&')
}
​