前端取消請求及取消重復請求方式
一、前言
今天，我想跟大傢分享幾種前端取消請求的幾種方式。
相信大傢在平時的開發中，肯定或多或少的會遇到需要取消重復請求的場景，比如最常見的，我們在使用tab欄時，我們都會使用一個盒子去存放內容，然後在切換tab欄時，會清除掉原來的內容，然後替換上新的內容，這個時候，如果我們的數據是通過服務從後端獲取的，就會存在一個問題，由於獲取數據是需要一定的時間的，就會存在當我們切換tab欄到新的tab頁時，原來的tab頁的服務還在響應中，這時新的tab頁的數據服務已經響應完成瞭，且頁面已經顯示瞭新的tab頁的內容，但是，這個時候舊的tab頁的數據也成功瞭並返回瞭數據，並將新的tab頁的內容覆蓋瞭。。。
所以為瞭避免這種情況的發生，我們就需要在切換tab欄發送新的請求之前，將原來的的請求取消掉，至於如何取消請求，這便是今天我要講的內容。
二、項目準備
在正式學習之前，我們先搭建一個項目，並還原剛剛所說的場景，為瞭節省時間，我們使用腳手架搭建瞭一個前端vue+TS+vite項目，簡單的做瞭幾個Demo，頁面如下，上面是我們現實內容的區域，點擊tab1按鈕時獲取並展示tab1的內容，點擊tab2按鈕時獲取並展示tab2的內容，以此類推，內容比較簡單，這裡就不放具體代碼瞭。
然後我們需要搭建一個本地服務器，這裡我們新建一個app.ts文件，使用express以及cors解決跨域問題去搭建一個簡單的服務器，具體代碼如下：
// 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文件，具體代碼如下：
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請求方法的別名有很多種，如下圖這裡就不做過多介紹瞭，大傢想瞭解的可以去看官網,我們這裡使用request方法。
最後，我們在頁面上引入並綁定請求：
// bar.vue
<script setup lang="ts">
import { ref } from 'vue'
import { request } from '@/utils/request'
const context = ref('tab1的內容...')
const getTab1Context = async () => {
const { data } = await request({
url: '/tab1',
})
context.value = data
}
const getTab2Context = async () => {
const { data } = await request({
url: '/tab2',
})
context.value = data
}
const getTab3Context = async () => {
const { data } = await request({
url: '/tab3',
})
context.value = data
}
</script>
為瞭方便理解，將template部分代碼也附上：
// bar.vue
<template>
<div class="container">
<div class="context">{{ context }}</div>
<div class="btns">
<el-button type="primary" @click="getTab1Context">tab1</el-button>
<el-button type="primary" @click="getTab2Context">tab2</el-button>
<el-button type="primary" @click="getTab3Context">tab3</el-button>
</div>
</div>
</template>
到這裡，我們的項目準備工作就好瞭，看下效果圖
然後看下我們前面提到的問題：
註意看，在我點擊瞭tab2之後立馬點擊tab3，盒子中會先顯示tab3的內容，然後又被tab2的內容覆蓋瞭。
三、原生方法
項目準備好之後，我們就可以進入正題瞭，其實，關於取消請求的方法，axios官方就已經有瞭，所以我們先來瞭解下使用axios原生的方法如何取消請求： 先看下官方的代碼：
可以使用 CancelToken.source 工廠方法創建 cancel token 像這樣：
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 ：
const CancelToken = axios.CancelToken;
let cancel;
axios.get('/user/12345', {
cancelToken: new CancelToken(function executor(c) {
// executor 函數接收一個 cancel 函數作為參數
cancel = c;
})
});
// 取消請求
cancel();
這是官方提供的兩種方法，我們將他們用到我們的項目上，因為都差不多，所以我們這裡就隻演示一種，選擇通過傳遞函數的方式來取消請求；
進入項目utils文件夾下的request.ts文件，修改代碼如下：
// 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按鈕都加上取消請求功能：
// bar.vue
<script setup lang="ts">
import { ref } from 'vue'
import { request, cancelFn } from '@/utils/request'
const context = ref('tab1的內容...')
const getTab1Context = async () => {
cancelFn('取消瞭tab2的請求')
const { data } = await request({
url: '/tab1',
})
context.value = data
}
const getTab2Context = async () => {
const { data } = await request({
url: '/tab2',
})
context.value = data
}
const getTab3Context = async () => {
cancelFn('取消瞭tab2的請求')
const { data } = await request({
url: '/tab3',
})
context.value = data
}
</script>
這樣取消請求的功能就完成瞭，看下效果：
四、promise
除瞭官網的方式之外，其實我們也可以借助Promise對象，我們都知道，Promise對象的狀態一旦確定就不能再改變的，基於這個原理，我們可以使用Promise封裝下我們的請求，然後通過手動改變Promise的狀態去阻止請求的響應，看下面代碼：
// 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<AxiosResponse> {
return new Promise((resolve, reject) => {
ins.request(Args).then((res: AxiosResponse) => {
resolve(res)
})
cancelFn = (msg) => {
reject(msg)
}
})
}
效果也是一樣的
需要註意的是，雖然效果是一樣的，但是使用Promise的方式，我們隻是手動修改瞭Promise的狀態為reject，但是請求還是一樣發送並響應瞭，沒有取消，這個是和使用Axios原生方法的不同之處。
五、借助Promise.race
講完瞭取消請求，其實還有一種場景也很常見，那就是取消重復請求，如果是要取消重復請求，我們又該怎麼實現呢？其實我們可以借助Promise.race，Promise.race的作用就是將多個Promise對象包裝成一個，即它接受一個數組，每一個數組成員都是一個Promise對象，隻要這些成員中有一個狀態改變，Promise.race的狀態就隨之改變，基於這個原理，我們可以實現取消重復請求請求的目的。
基本思路就是，我們給每一個請求身邊都放一個Promise對象，這個對象就是一顆炸彈，將他們一起放到Promise.race裡面，當我們需要取消請求的時候就可以點燃這顆炸藥。
還是上面的例子，我們針對按鈕tab2做一個取消重復請求的功能，我們先聲明一個類，在裡面做取消重復請求的功能，在utils下新建cancelClass.ts文件：
// cancelClass.ts
import { AxiosResponse } from 'axios'
export class CancelablePromise {
pendingPromise: any
reject: any
constructor() {
this.pendingPromise = null
this.reject = null
}
handleRequest(requestFn: any): Promise<AxiosResponse> {
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函數,讓他返回一個函數；
// request.ts
export function request(Args: AxiosRequestConfig) {
return () => ins.request(Args)
}
最後在頁面中引入並使用：
// bar.vue
<script setup lang="ts">
import { ref } from 'vue'
import { request, cancelFn } from '@/utils/request'
import { CancelablePromise } from '@/utils/cancelClass'
...
const cancelablePromise = new CancelablePromise()
...
const getTab2Context = async () => {
const { data } = await cancelablePromise.handleRequest(
request({
url: '/tab2',
})
)
context.value = data
}
</script>
最後看下效果
六、總結
到這裡，我們前端取消請求和取消重復請求的方法就學習完瞭，需要註意的是，即使是使用官方的方法，也僅僅是取消服務器還沒接收到的請求，如果請求已經發送到瞭服務端是取消不瞭的，隻能讓後端同時去處理瞭，使用promise的方法，僅僅隻是通過改變promise的狀態來阻止響應結果的接收，服務還是照常發送的。
以上就是前端取消請求及取消重復請求方式的詳細內容，更多關於前端取消請求取消重復請求的資料請關註WalkonNet其它相關文章！