前端取消请求及取消重复请求方式

目录
  • 一、前言
  • 二、项目准备
  • 三、原生方法
  • 四、promise
  • 五、借助Promise.race
  • 六、总结

一、前言

今天,我想跟大家分享几种前端取消请求的几种方式。

相信大家在平时的开发中,肯定或多或少的会遇到需要取消重复请求的场景,比如最常见的,我们在使用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函数就可以了,我们给tab1tab3按钮都加上取消请求功能:

// 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.racePromise.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
  }
}

上面代码中,我们声明了一个类,然后在类中声明了两个属性pendingPromisereject,一个request请求方法用来封装请求并判断上一个请求是否还在响应中,如果还未响应则手动取消上一次的请求,同时声明了一个promise对象,并将他的reject方法保存在类的reject属性中,然后用promise.race包装了请求函数和刚刚声明的promise对象。

最后声明了一个cancel方法,在cancel方法中触发reject函数,来触发promise对象的状态改变,这样就无法获取到reuestFn的响应数据了。从而达到了取消请求的目的;

因为requestFn必须是一个函数,所以我们需要改装下Axiosrequest函数,让他返回一个函数;

// 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的状态来阻止响应结果的接收,服务还是照常发送的。

以上就是前端取消请求及取消重复请求方式的详细内容,更多关于前端取消请求取消重复请求的资料请关注我们其它相关文章!

(0)

相关推荐

  • Vue中Axios中取消请求及阻止重复请求的方法

    目录 阻止请求目的: 常见情况: 新建 axios.js 文件 全局 main.js 引入 阻止请求目的: 为了防止用户在网络不好或者其他情况下短时间内重复进行接口请求,从而导致前端向后端重复发送多次请求. 常见情况: PC端:输入框搜素,多次请求接口移动端:移动端很容易造成误操作或多操作请求(移动端没有点击延迟)注意:有Loading遮罩时也有可能发生重复请求 新建 axios.js 文件 import axios from "axios"; // import router fro

  • JavaScript取消请求方法

    目录 引言 取消 XMLHttpRequest 请求 取消 Fetch 请求 取消 aixos 请求 引言 众所周知,JavaScript 实现异步请求就靠浏览器提供的两个 API —— XMLHttpRequest 和 Fetch.我们平常用的较多的是 Promise 请求库 axios,它基于 XMLHttpRequest. 本篇带来 XMLHttpRequest.Fetch 和 axios 分别是怎样“取消请求”的. 闲话少说,冲就完事了~ 取消 XMLHttpRequest 请求 当请求

  • axios取消请求的实践记录分享

    问题的来源 用el-autocomplete远程获取数据时,点击输入框会触发第一次请求,然后输入搜索文字后会触发第二次请求,两次请求间隔较短,有时候会出现第二次请求比第一次请求先返回的情况,导致我们期望的第二次发送的请求返回的数据会被第一次请求返回的数据覆盖掉 解决思路 在发送第二次请求的时候如果第一次请求还未返回,则取消第一次请求,以保证后发送的请求返回的数据不会被先发送的请求覆盖. axios官方文档取消请求说明 方法一: const CancelToken = axios.CancelTo

  • 浅谈axios中取消请求及阻止重复请求的方法

    目录 前言 核心--CancelToken 实际应用和封装 一些小细节 前言 在实际项目中,我们可能需要对请求进行"防抖"处理.这里主要是为了阻止用户在某些情况下短时间内重复点击某个按钮,导致前端向后端重复发送多次请求.这里我列举两种比较常见的实际情况: PC端 - 用户双击搜索按钮,可能会触发两次搜索请求 移动端 - 因移动端没有点击延迟,所以极易造成误操作或多操作,造成请求重发 以上情况有可能在有Loading遮罩时依然发生,所以我们要考虑前端阻止重复请求的方法. 核心--Canc

  • axios取消请求与避免重复请求

    目录 起源 现状 取消请求 cancelToken 修改后的请求方法 避免重复请求 总结 起源 某个页面需要下载全部数据的功能,下载数据量大,接口延迟长..... 某个页面加载初始数据量延长长,但单个检索快速,出现初始数据加载中时,检索接口返回,初始数据后续返回覆盖了检索数据的展示.... 这些情况需要我们: 能够手动取消/终止请求Request. 某些页面接口同时只能有一个在请求. 现状 系统基于老哥花裤衩开源的vue-element-admin做的二次开发,其中的请求采用的是axios,其中

  • 前端取消请求及取消重复请求方式

    目录 一.前言 二.项目准备 三.原生方法 四.promise 五.借助Promise.race 六.总结 一.前言 今天,我想跟大家分享几种前端取消请求的几种方式. 相信大家在平时的开发中,肯定或多或少的会遇到需要取消重复请求的场景,比如最常见的,我们在使用tab栏时,我们都会使用一个盒子去存放内容,然后在切换tab栏时,会清除掉原来的内容,然后替换上新的内容,这个时候,如果我们的数据是通过服务从后端获取的,就会存在一个问题,由于获取数据是需要一定的时间的,就会存在当我们切换tab栏到新的ta

  • Vue路由切换和Axios接口取消重复请求详解

    目录 前言 场景 解决方案 axios中如何取消请求 项目中封装使用 总结 参考 前言 在日常前端开发中, 经常会遇到频繁发起的重复请求, 会给服务器及网络造成不必要的压力, 可通过取消重复请求解决 场景 订单数据条件筛选查询 表单提交按钮频繁点击 路由页面切换请求未取消 解决方案 在每个请求发起的时候存储当前存储的标记在一个数组或Map中, 针对每个请求的时候在请求拦截中查询是否重复, 如果已重复则取消历史中重复的请求, 再发起当前请求, 如果没有重复, 则添加存储标记并正常请求, 已请求完成

  • Axios取消重复请求的方法实例详解

    目录 前言 一.如何取消请求 二.如何判断重复请求 三.如何取消重复请求 3.1 定义辅助函数 3.2 设置请求拦截器 3.3 设置响应拦截器 四.CancelToken 的工作原理 五.总结 六.参考资源 前言 在 Web 项目开发过程中,我们经常会遇到重复请求的场景,如果系统不对重复的请求进行处理,则可能会导致系统出现各种问题.比如重复的 post 请求可能会导致服务端产生两笔记录.那么重复请求是如何产生的呢?这里我们举 2 个常见的场景: 假设页面中有一个按钮,用户点击按钮后会发起一个 A

  • vue axios拦截器常用之重复请求取消

    引言 上一篇介绍了axios的简单封装,知道了axios拦截器的应用场景和方法,今天来看一下对于响应时间过长且请求次数过高的情况拦截器如何处理. 取消请求的方法 Axios使用内部提供的CancelToken来取消请求 官网示例1:用CancelToken.source工厂方法创建 cancel token,像这样 const CancelToken = axios.CancelToken; const source = CancelToken.source(); axios.get('/use

  • Java注解方式之防止重复请求

    目录 一. 前情提要 二.技术设计 2.1 库表设计 2.2 业务逻辑 2.3 代码编写 2.4 测试 2.5 问题所在 三.解决方案 四 .唠唠 4.1 项目 4.2 redis服务 4.3 其他问题 自定义注解方式防止前端同一时间多次重复提交 一. 前情提要 有这样一个业务,上课的时候老师给表现好的学生送小花花, 每节课都能统计出某个学生收到的花的总数. 按照产品需求,前端点击送花按钮后30秒内是不能再次送花的(信任的基础) (上课老师送花行为都进行统计了,可见互联网是多么可怕) 二.技术设

  • JS前端并发多个相同的请求控制为只发一个请求方式

    目录 描述如下 老版本cachedAsync 进阶版本 测试cacheAsync 快速搭建一个服务器 客户端 提示 描述如下 同时发多个相同的请求,如果第一个请求成功,那么剩余的请求都不会发出,成功的结果作为剩余请求返回 如果第一个请求失败了,那么接着发编号为2的请求,如果请求成功,那么剩余的请求都不会发出,成功的结果作为剩余请求返回 如果第二个请求失败了,那么接着发编号为3的请求,如果请求成功,那么剩余的请求都不会发出,成功的结果作为剩余请求返回 ...以此递推,直到遇到最坏的情况需要发送最后

  • Java 限制前端重复请求的实例代码

    目录 背景及用途 实现步骤 背景及用途 前端页面出现卡顿,用户反复点击操作按钮,导致后台接口短时间内多次提交 实现步骤 设置切面,增加注解,导致在规定时间内该接口不可重复调用 设置一个接口 NoRepeatSubmit import java.lang.annotation.*; /** * xzj_2022_8_2 * 重复请求限制切面 */ @Target(ElementType.METHOD) //注解放置的目标位置,METHOD是可注解在方法级别上 @Retention(Retentio

随机推荐