Axios 应用: 实现后端接口封装 & 重复请求回避(撤销请求)

Axios 应用: 实现后端接口封装 & 重复请求回避(撤销请求)

简介

之前的Axios：前端 HTTP 請求介绍了 js 的第三库 Axios，封装前端 AJAX 请求的 API 和详细的使用参数。但是相信大部分的人，包括正在做项目而需要直接上手的开发者，肯定没有耐心也没有时间细细的品味哪些参数能用在哪里。

因此本篇将要从封装后端 API 接口以及实现避免多次点击的重复请求问题的角度进行整理，为大家提供一种 Axios 的使用模型，相当于是对 Axios 进行再封装，马上来看看。

参考

完整示例代码

https://github.com/superfreeeee/Blog-code/tree/main/front_end/others/axios-encapsulation

正文

目标

首先我们先明确接下来要完成的模型目标：

1. 封装 axios 和后端的接口，使用者不需要自行管理 axios 相关配置，能专注在业务数据上
2. 限制重复的 http 请求，短时间内发起相同请求则撤销前一次请求(重复触发的逻辑可根据业务需要进行更改)

axios 中的请求撤销

在开始实现 axios 的再封装之前，我们先来搞清除 axios 提供的撤销请求的接口有哪些

1. CacelToken.source 工厂方法

第一种是使用 axios.CancelToken 提供的工厂方法 source 生成一个 cancelToken，并可透过 cancel 方法来撤销请求

import axios from 'axios'
const CancelToken = axios.CancelToken

// 生成 cancelToekn 实例
const source = CancelToken.source()

axios.get('/xxx/yyy', {
   
   
    cancelToken: source.token
}).catch((err) => {
   
   
    if (axios.isCancel(err)) {
   
   
        console.log('Request cancel')
    } else {
   
   
        // 其他错误处理
        // 例：return Promise.reject(err)
    }
})

2. CancelToken 构造函数(参数为接受一个 cancel 方法的回调)

第二种则是直接使用 CancelToken 的构造函数，参数为一个回调函数，回调函数接受一个 cancel 方法作参数

import axios from 'axios'
const CancelToken = axios.CancelToken

let cancel

axios.get('/xxx/yyy', {
   
   
    cancelToken: new CancelToken((c) => {
   
   
        // c 为该请求对应的撤销函数
        cancel = c
    })
})

// 撤销请求
cancel()

代码示例

好了了解了 axios 的撤销请求方法之后，就能够开始我们的项目用 axios 再封装了。完整的示例项目实现请到完整示例代码，这边只列出关键的核心代码。

axios 对象封装

首先第一步我们要创建自己的 axios 对象，取代全局 axios 对象作为我们的请求主体

/* axi