前端取消请求及取消重复请求方式_JavaScript
时间:2022-07-19 09:16 来源:网络 作者:落离 点击:次
一、前言今天,我想跟大家分享几种前端取消请求的几种方式。
相信大家在平时的开发中,肯定或多或少的会遇到需要取消重复请求的场景,比如最常见的,我们在使用
所以为了避免这种情况的发生,我们就需要在切换
二、项目准备
在正式学习之前,我们先搭建一个项目,并还原刚刚所说的场景,为了节省时间,我们使用脚手架搭建了一个前端
然后我们需要搭建一个本地服务器,这里我们新建一个 // 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秒的延迟,以便实现我们想要的场景,然后我们使用
然后我们使用 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) }
这里我们新建了一个
最后,我们在页面上引入并绑定请求: // 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>
为了方便理解,将 // 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> 到这里,我们的项目准备工作就好了,看下效果图
然后看下我们前面提到的问题:
注意看,在我点击了
三、原生方法
项目准备好之后,我们就可以进入正题了,其实,关于取消请求的方法,
可以使用 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.');
同时还可以通过传递一个 const CancelToken = axios.CancelToken; let cancel; axios.get('/user/12345', { cancelToken: new CancelToken(function executor(c) { // executor 函数接收一个 cancel 函数作为参数 cancel = c; }) }); // 取消请求 cancel(); 这是官方提供的两种方法,我们将他们用到我们的项目上,因为都差不多,所以我们这里就只演示一种,选择通过传递函数的方式来取消请求;
进入项目 // 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) }
然后我们就可以在想要取消请求的地方调用 // 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
除了官网的方式之外,其实我们也可以借助 // 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.race
讲完了取消请求,其实还有一种场景也很常见,那就是取消重复请求,如果是要取消重复请求,我们又该怎么实现呢?其实我们可以借助
基本思路就是,我们给每一个请求身边都放一个
还是上面的例子,我们针对按钮 // 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 } }
上面代码中,我们声明了一个类,然后在类中声明了两个属性
最后声明了一个
因为 // 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> 最后看下效果
六、总结
到这里,我们前端取消请求和取消重复请求的方法就学习完了,需要注意的是,即使是使用官方的方法,也仅仅是取消服务器还没接收到的请求,如果请求已经发送到了服务端是取消不了的,只能让后端同时去处理了,使用 以上就是前端取消请求及取消重复请求方式的详细内容,更多关于前端取消请求取消重复请求的资料请关注其它相关文章! |