--- theme: cyanosis --- # 一、前言大家好，我是大斌，一名野生的前端工程师，今天，我想跟大家分享几种前端取消请求的几种方式。相信大家在平时的开发中，肯定或多或少的会遇到需要取消重复请求的场景，比如最常见的，我们在使用`tab`栏时，我们都会使用一个盒子去存放内容，然后在切换`tab`栏时，会清除掉原来的内容，然后替换上新的内容，这个时候，如果我们的数据是通过服务从后端获取的，就会存在一个问题，由于获取数据是需要一定的时间的，就会存在当我们切换`tab`栏到新的`tab`页时，原来的`tab`页的服务还在响应中，这时新的`tab`页的数据服务已经响应完成了，且页面已经显示了新的`tab`页的内容，但是，这个时候旧的`tab`页的数据也成功了并返回了数据，并将新的`tab`页的内容覆盖了。。。所以为了避免这种情况的发生，我们就需要在切换`tab`栏发送新的请求之前，将原来的的请求取消掉，至于如何取消请求，这便是今天我要讲的内容。 # 二、项目准备在正式学习之前，我们先搭建一个项目，并还原刚刚所说的场景，为了节省时间，我们使用脚手架搭建了一个前端`vue+TS+vite`项目，简单的做了几个`Demo`，页面如下，上面是我们现实内容的区域，点击tab1按钮时获取并展示`tab1`的内容，点击`tab2`按钮时获取并展示`tab2`的内容，以此类推，内容比较简单，这里就不放具体代码了。 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ccbdd2e3ff74459db81d239fd70311e5~tplv-k3u1fbpfcp-watermark.image?) 然后我们需要搭建一个本地服务器，这里我们新建一个`app.ts`文件，使用`express`以及`cors`解决跨域问题去搭建一个简单的服务器，具体代码如下： ```js // app.ts const express = require('express') const app = express() const cors = require('cors') app.use(cors()) app.get('/tab1', (req, res) => { res.send('这是tab1的内容...') }) app.get('/tab2', (req, res) => { setTimeout(() => { res.send('这是tab2的内容...') }, 3000) }) app.get('/tab3', (req, res) => { res.send('这是tab3的内容...') }) app.listen('3000', () => { console.log('server running at 3000 port...') }) ``` 上面代码，我们新建了一个服务器并让他运行在本地的3000端口，同时在获取tab2的内容时，我们设置了3秒的延迟，以便实现我们想要的场景，然后我们使用`node app.ts`启动服务器，当终端打印了`server running at 3000 port...`就说明服务器启动成功了。然后我们使用`axios`去发送请求，安装`axios`，然后我们在项目中`src`下面新建`utils`文件夹，然后新建`request.ts`文件，具体代码如下： ```js import axios, { AxiosRequestConfig } from 'axios' // 新建一个axios实例 const ins = axios.create({ baseURL: 'http://localhost:3000', timeout: 5000, }) export function request(Args: AxiosRequestConfig) { return ins.request(Args) } ``` 这里我们新建了一个`axios`实例，并配置了baseURL和超时时间，并做了一个简单的封装然后导出，需要注意的是，`axios`请求方法的别名有很多种，如下图这里就不做过多介绍了，大家想了解的可以去看[官网](https://github.com/axios/axios),我们这里使用`request`方法。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/44518af9fec24ed7a4080639311873cd~tplv-k3u1fbpfcp-watermark.image?) 最后，我们在页面上引入并绑定请求： ```js // bar.vue ``` 为了方便理解，将`template`部分代码也附上： ```js // bar.vue ``` 到这里，我们的项目准备工作就好了，看下效果图 ![取消请求1.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/835d64d0acc64d618b17bc1010ae9be5~tplv-k3u1fbpfcp-watermark.image?) 然后看下我们前面提到的问题： ![取消请求2.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0c06116ffe52424fbdc4c1280721b650~tplv-k3u1fbpfcp-watermark.image?) 注意看，在我点击了`tab2`之后立马点击`tab3`，盒子中会先显示`tab3`的内容，然后又被`tab2`的内容覆盖了。 # 三、原生方法项目准备好之后，我们就可以进入正题了，其实，关于取消请求的方法，`axios`官方就已经有了，所以我们先来了解下使用`axios`原生的方法如何取消请求：先看下官方的代码：可以使用 `CancelToken.source` 工厂方法创建 `cancel token` 像这样： ```js const CancelToken = axios.CancelToken; const source = CancelToken.source(); axios.get('/user/12345', { cancelToken: source.token }).catch(function (thrown) { if (axios.isCancel(thrown)) { console.log('Request canceled', thrown.message); } else { /* 处理错误 */ } }); axios.post('/user/12345', { name: 'new name' }, { cancelToken: source.token }); // 取消请求 (message 参数是可选的) source.cancel('Operation canceled by the user.'); ``` 同时还可以通过传递一个` executor `函数到` CancelToken `的构造函数来创建 `cancel token` ： ```js const CancelToken = axios.CancelToken; let cancel; axios.get('/user/12345', { cancelToken: new CancelToken(function executor(c) { // executor 函数接收一个 cancel 函数作为参数 cancel = c; }) }); // 取消请求 cancel(); ``` 这是官方提供的两种方法，我们将他们用到我们的项目上，因为都差不多，所以我们这里就只演示一种，选择通过传递函数的方式来取消请求；进入项目`utils`文件夹下的`request.ts`文件，修改代码如下： ```js // request.ts import axios, { AxiosRequestConfig } from 'axios' const CancelToken = axios.CancelToken const ins = axios.create({ baseURL: 'http://localhost:3000', timeout: 5000, }) // 新建一个取消请求函数并导出 export let cancelFn = (cancel: string) => { console.log(cancel) } export function request(Args: AxiosRequestConfig) { // 在请求配置中增加取消请求的Token Args.cancelToken = new CancelToken(function (cancel) { cancelFn = cancel }) return ins.request(Args) } ``` 然后我们就可以在想要取消请求的地方调用`cancelFn`函数就可以了，我们给`tab1`和`tab3`按钮都加上取消请求功能： ```js // bar.vue ``` 这样取消请求的功能就完成了，看下效果： ![取消请求3.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f2b71ecbd94b4301906aeb5cb1494c31~tplv-k3u1fbpfcp-watermark.image?) # 四、promise 除了官网的方式之外，其实我们也可以借助`Promise`对象，我们都知道，`Promise`对象的状态一旦确定就不能再改变的，基于这个原理，我们可以使用`Promise`封装下我们的请求，然后通过手动改变`Promise`的状态去阻止请求的响应，看下面代码： ```js // request.ts import axios, { AxiosRequestConfig, AxiosResponse } from 'axios' const ins = axios.create({ baseURL: 'http://localhost:3000', timeout: 5000, }) // 新建一个取消请求函数并导出 export let cancelFn = (cancel: string) => { console.log(cancel) } export function request(Args: AxiosRequestConfig): Promise { return new Promise((resolve, reject) => { ins.request(Args).then((res: AxiosResponse) => { resolve(res) }) cancelFn = (msg) => { reject(msg) } }) } ``` 效果也是一样的 ![取消请求4.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2fd67d0b2eb846f4b248de371cdbe5fa~tplv-k3u1fbpfcp-watermark.image?) 需要注意的是，虽然效果是一样的，但是使用`Promise`的方式，我们只是手动修改了`Promise`的状态为`reject`，但是请求还是一样发送并响应了，没有取消，这个是和使用`Axios`原生方法的不同之处。 # 五、借助Promise.race 讲完了取消请求，其实还有一种场景也很常见，那就是取消重复请求，如果是要取消重复请求，我们又该怎么实现呢？其实我们可以借助`Promise.race`，`Promise.race`的作用就是将多个`Promise`对象包装成一个，即它接受一个数组，每一个数组成员都是一个`Promise`对象，只要这些成员中有一个状态改变，`Promise.race`的状态就随之改变，基于这个原理，我们可以实现取消重复请求请求的目的。基本思路就是，我们给每一个请求身边都放一个`Promise`对象，这个对象就是一颗炸弹，将他们一起放到`Promise.race`里面，当我们需要取消请求的时候就可以点燃这颗炸药。还是上面的例子，我们针对按钮`tab2`做一个取消重复请求的功能，我们先声明一个类，在里面做取消重复请求的功能，在`utils`下新建`cancelClass.ts`文件： ```js // cancelClass.ts import { AxiosResponse } from 'axios' export class CancelablePromise { pendingPromise: any reject: any constructor() { this.pendingPromise = null this.reject = null } handleRequest(requestFn: any): Promise { if (this.pendingPromise) { this.cancel('取消了上一个请求。。。') } const promise = new Promise((resolve, reject) => (this.reject = reject)) this.pendingPromise = Promise.race([requestFn(), promise]) return this.pendingPromise } cancel(reason: string) { this.reject(reason) this.pendingPromise = null } } ``` 上面代码中，我们声明了一个类，然后在类中声明了两个属性`pendingPromise`和`reject`，一个`request`请求方法用来封装请求并判断上一个请求是否还在响应中，如果还未响应则手动取消上一次的请求，同时声明了一个`promise`对象，并将他的`reject`方法保存在类的`reject`属性中，然后用`promise.race`包装了请求函数和刚刚声明的`promise`对象。最后声明了一个`cancel`方法，在`cancel`方法中触发`reject`函数，来触发`promise`对象的状态改变，这样就无法获取到`reuestFn`的响应数据了。从而达到了取消请求的目的；因为`requestFn`必须是一个函数，所以我们需要改装下`Axios`的`request`函数,让他返回一个函数； ```js // request.ts export function request(Args: AxiosRequestConfig) { return () => ins.request(Args) } ``` 最后在页面中引入并使用： ```js // bar.vue ``` 最后看下效果 ![取消请求5.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5b2d404ebec148a8af87ae417f258391~tplv-k3u1fbpfcp-watermark.image?) # 六、总结到这里，我们前端取消请求和取消重复请求的方法就学习完了，需要注意的是，即使是使用官方的方法，也仅仅是取消服务器还没接收到的请求，如果请求已经发送到了服务端是取消不了的，只能让后端同时去处理了，使用`promise`的方法，仅仅只是通过改变`promise`的状态来阻止响应结果的接收，服务还是照常发送的。今天的分享就到这里了，如果对你有帮助的，请给我一个赞吧！