web前端怎么取消請(qǐng)求及取消重復(fù)請(qǐng)求

今天小編給大家分享一下web前端怎么取消請(qǐng)求及取消重復(fù)請(qǐng)求的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

項(xiàng)目準(zhǔn)備

在正式學(xué)習(xí)之前，我們先搭建一個(gè)項(xiàng)目，并還原剛剛所說(shuō)的場(chǎng)景，為了節(jié)省時(shí)間，我們使用腳手架搭建了一個(gè)前端vue+TS+vite項(xiàng)目，簡(jiǎn)單的做了幾個(gè)Demo，頁(yè)面如下，上面是我們現(xiàn)實(shí)內(nèi)容的區(qū)域，點(diǎn)擊tab1按鈕時(shí)獲取并展示tab1的內(nèi)容，點(diǎn)擊tab2按鈕時(shí)獲取并展示tab2的內(nèi)容，以此類推，內(nèi)容比較簡(jiǎn)單，這里就不放具體代碼了。

然后我們需要搭建一個(gè)本地服務(wù)器，這里我們新建一個(gè)app.ts文件，使用express以及cors解決跨域問(wèn)題去搭建一個(gè)簡(jiǎn)單的服務(wù)器，具體代碼如下：

// app.ts
const express = require('express')
const app = express()
const cors = require('cors')
app.use(cors())
app.get('/tab1', (req, res) => {
  res.send('這是tab1的內(nèi)容...')
})
app.get('/tab2', (req, res) => {
  setTimeout(() => {
    res.send('這是tab2的內(nèi)容...')
  }, 3000)
})
app.get('/tab3', (req, res) => {
  res.send('這是tab3的內(nèi)容...')
})
app.listen('3000', () => {
  console.log('server running at 3000 port...')
})

上面代碼，我們新建了一個(gè)服務(wù)器并讓他運(yùn)行在本地的3000端口，同時(shí)在獲取tab2的內(nèi)容時(shí)，我們?cè)O(shè)置了3秒的延遲，以便實(shí)現(xiàn)我們想要的場(chǎng)景，然后我們使用node app.ts啟動(dòng)服務(wù)器，當(dāng)終端打印了server running at 3000 port...就說(shuō)明服務(wù)器啟動(dòng)成功了。

然后我們使用axios去發(fā)送請(qǐng)求，安裝axios，然后我們?cè)陧?xiàng)目中src下面新建utils文件夾，然后新建request.ts文件，具體代碼如下：

import axios, { AxiosRequestConfig } from 'axios'
// 新建一個(gè)axios實(shí)例
const ins = axios.create({
  baseURL: 'http://localhost:3000',
  timeout: 5000,
})
export function request(Args: AxiosRequestConfig) {
  return ins.request(Args)
}

這里我們新建了一個(gè)axios實(shí)例，并配置了baseURL和超時(shí)時(shí)間，并做了一個(gè)簡(jiǎn)單的封裝然后導(dǎo)出，需要注意的是，axios請(qǐng)求方法的別名有很多種，如下圖這里就不做過(guò)多介紹了，大家想了解的可以去看官網(wǎng),我們這里使用request方法。

最后，我們?cè)陧?yè)面上引入并綁定請(qǐng)求：

// bar.vue
<script setup lang="ts">
import { ref } from 'vue'
import { request } from '@/utils/request'
const context = ref('tab1的內(nèi)容...')
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>

三、原生方法

項(xiàng)目準(zhǔn)備好之后，我們就可以進(jìn)入正題了，其實(shí)，關(guān)于取消請(qǐng)求的方法，axios官方就已經(jīng)有了，所以我們先來(lái)了解下使用axios原生的方法如何取消請(qǐng)求： 先看下官方的代碼：

可以使用 CancelToken.source 工廠方法創(chuàng)建 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 { /* 處理錯(cuò)誤 */ }
});
axios.post('/user/12345', {
    name: 'new name'
}, {
    cancelToken: source.token
});
// 取消請(qǐng)求 (message 參數(shù)是可選的)
source.cancel('Operation canceled by the user.');

同時(shí)還可以通過(guò)傳遞一個(gè)executor函數(shù)到CancelToken的構(gòu)造函數(shù)來(lái)創(chuàng)建 cancel token ：

const CancelToken = axios.CancelToken;
let cancel;
axios.get('/user/12345', {
    cancelToken: new CancelToken(function executor(c) {
        // executor 函數(shù)接收一個(gè) cancel 函數(shù)作為參數(shù)
        cancel = c;
    })
});
// 取消請(qǐng)求
cancel();

這是官方提供的兩種方法，我們將他們用到我們的項(xiàng)目上，因?yàn)槎疾畈欢啵晕覀冞@里就只演示一種，選擇通過(guò)傳遞函數(shù)的方式來(lái)取消請(qǐng)求；

進(jìn)入項(xiàng)目utils文件夾下的request.ts文件，修改代碼如下：

// request.ts
import axios, { AxiosRequestConfig } from 'axios'
const CancelToken = axios.CancelToken
const ins = axios.create({
  baseURL: 'http://localhost:3000',
  timeout: 5000,
})
// 新建一個(gè)取消請(qǐng)求函數(shù)并導(dǎo)出
export let cancelFn = (cancel: string) => {
  console.log(cancel)
}
export function request(Args: AxiosRequestConfig) {
  // 在請(qǐng)求配置中增加取消請(qǐng)求的Token
  Args.cancelToken = new CancelToken(function (cancel) {
    cancelFn = cancel
  })
  return ins.request(Args)
}

然后我們就可以在想要取消請(qǐng)求的地方調(diào)用cancelFn函數(shù)就可以了，我們給tab1和tab3按鈕都加上取消請(qǐng)求功能：

// bar.vue
<script setup lang="ts">
import { ref } from 'vue'
import { request, cancelFn } from '@/utils/request'
const context = ref('tab1的內(nèi)容...')
const getTab1Context = async () => {
  cancelFn('取消了tab2的請(qǐng)求')
  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的請(qǐng)求')
  const { data } = await request({
    url: '/tab3',
  })
  context.value = data
}
</script>

四、promise

除了官網(wǎng)的方式之外，其實(shí)我們也可以借助Promise對(duì)象，我們都知道，Promise對(duì)象的狀態(tài)一旦確定就不能再改變的，基于這個(gè)原理，我們可以使用Promise封裝下我們的請(qǐng)求，然后通過(guò)手動(dòng)改變Promise的狀態(tài)去阻止請(qǐng)求的響應(yīng)，看下面代碼：

// request.ts
import axios, { AxiosRequestConfig, AxiosResponse } from 'axios'
const ins = axios.create({
  baseURL: 'http://localhost:3000',
  timeout: 5000,
})
// 新建一個(gè)取消請(qǐng)求函數(shù)并導(dǎo)出
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的方式，我們只是手動(dòng)修改了Promise的狀態(tài)為reject，但是請(qǐng)求還是一樣發(fā)送并響應(yīng)了，沒(méi)有取消，這個(gè)是和使用Axios原生方法的不同之處。

五、借助Promise.race

講完了取消請(qǐng)求，其實(shí)還有一種場(chǎng)景也很常見(jiàn)，那就是取消重復(fù)請(qǐng)求，如果是要取消重復(fù)請(qǐng)求，我們又該怎么實(shí)現(xiàn)呢？其實(shí)我們可以借助Promise.race，Promise.race的作用就是將多個(gè)Promise對(duì)象包裝成一個(gè)，即它接受一個(gè)數(shù)組，每一個(gè)數(shù)組成員都是一個(gè)Promise對(duì)象，只要這些成員中有一個(gè)狀態(tài)改變，Promise.race的狀態(tài)就隨之改變，基于這個(gè)原理，我們可以實(shí)現(xiàn)取消重復(fù)請(qǐng)求請(qǐng)求的目的。

基本思路就是，我們給每一個(gè)請(qǐng)求身邊都放一個(gè)Promise對(duì)象，這個(gè)對(duì)象就是一顆炸彈，將他們一起放到Promise.race里面，當(dāng)我們需要取消請(qǐng)求的時(shí)候就可以點(diǎn)燃這顆炸藥。

還是上面的例子，我們針對(duì)按鈕tab2做一個(gè)取消重復(fù)請(qǐng)求的功能，我們先聲明一個(gè)類，在里面做取消重復(fù)請(qǐng)求的功能，在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('取消了上一個(gè)請(qǐng)求。。。')
    }
    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
  }
}

上面代碼中，我們聲明了一個(gè)類，然后在類中聲明了兩個(gè)屬性pendingPromise和reject，一個(gè)request請(qǐng)求方法用來(lái)封裝請(qǐng)求并判斷上一個(gè)請(qǐng)求是否還在響應(yīng)中，如果還未響應(yīng)則手動(dòng)取消上一次的請(qǐng)求，同時(shí)聲明了一個(gè)promise對(duì)象，并將他的reject方法保存在類的reject屬性中，然后用promise.race包裝了請(qǐng)求函數(shù)和剛剛聲明的promise對(duì)象。

最后聲明了一個(gè)cancel方法，在cancel方法中觸發(fā)reject函數(shù)，來(lái)觸發(fā)promise對(duì)象的狀態(tài)改變，這樣就無(wú)法獲取到reuestFn的響應(yīng)數(shù)據(jù)了。從而達(dá)到了取消請(qǐng)求的目的；

因?yàn)?code>requestFn必須是一個(gè)函數(shù)，所以我們需要改裝下Axios的request函數(shù),讓他返回一個(gè)函數(shù)；

// request.ts
export function request(Args: AxiosRequestConfig) {
  return () => ins.request(Args)
}

最后在頁(yè)面中引入并使用：

// 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>

以上就是“web前端怎么取消請(qǐng)求及取消重復(fù)請(qǐng)求”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。