注册
web

前端如何实现同时发送多个相同请求时只发送一个?

原生实现


为了控制并发请求,可以使用以下两种常见的方式:


防抖


防抖是指在一段时间内多次触发同一事件,只执行最后一次触发的操作。在前端中,可以利用定时器来实现防抖的效果。具体实现方法如下:


function debounce(func, delay) {
let timer;
return function() {
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, arguments);
}, delay);
}
}

在发送请求的地方使用防抖函数,如下所示:


const sendRequest = debounce(() => {
// 发送请求的代码
}, 500);

上述代码中,sendRequest 是一个防抖函数,它将在 500ms 后执行。如果在 500ms 内再次触发 sendRequest 函数,计时器会被重新启动,并且等待 500ms,以确保只有最后一次触发才会发送请求。


节流


节流是指在一段时间内只执行一次操作。与防抖不同的是,节流是指在一定的时间间隔内只执行一次操作。在前端中,可以使用定时器来实现节流的效果。具体实现方法如下:


function throttle(func, delay) {
let timer;
return function() {
if (!timer) {
timer = setTimeout(() => {
func.apply(this, arguments);
timer = null;
}, delay);
}
}
}

在发送请求的地方使用节流函数,如下所示:


const sendRequest = throttle(() => {
// 发送请求的代码
}, 500);

上述代码中,sendRequest 是一个节流函数,它将在 500ms 后执行。如果在 500ms 内再次触发 sendRequest 函数,由于计时器还没有结束,函数不会执行任何操作。只有当计时器结束后才会再次触发请求。


Vue + Axios


在 Vue 中使用 Axios 发送请求,可以使用 Axios 的 CancelToken 来取消重复的请求,从而实现并发多个相同的请求只发送一个的效果。


具体实现方法如下:



  1. 创建 CancelToken

首先,需要创建一个 CancelToken,用于取消请求。在 Vue 中,可以在组件的 data 中定义一个 cancelToken 对象:


data() {
return {
cancelToken: axios.CancelToken.source().token
}
}


  1. 发送请求时使用 CancelToken

在发送请求时,需要将定义的 cancelToken 对象作为配置的 cancelToken 属性传递给 Axios:


axios.get(url, {
cancelToken: this.cancelToken
}).then(response => {
// 处理响应结果
}).catch(error => {
// 处理请求错误
});


  1. 取消重复的请求

在发送新的请求之前,需要取消之前正在进行的相同请求。可以通过判断上一次请求的 CancelToken 和当前请求的 CancelToken 是否相同来实现:


if (this.lastRequestCancelToken) {
this.lastRequestCancelToken.cancel('取消重复的请求');
}
this.lastRequestCancelToken = this.cancelToken;

上述代码中,lastRequestCancelToken 是用于保存上一次请求的 CancelToken 对象的变量。在发送新的请求之前,需要先取消之前正在进行的相同请求,并将当前的 CancelToken 对象赋值给 lastRequestCancelToken 变量。


完整的实现代码如下:


data() {
return {
cancelToken: axios.CancelToken.source().token,
lastRequestCancelToken: null
}
},
methods: {
fetchData() {
if (this.lastRequestCancelToken) {
this.lastRequestCancelToken.cancel('取消重复的请求');
}
this.lastRequestCancelToken = this.cancelToken;
axios.get(url, {
cancelToken: this.cancelToken
}).then(response => {
// 处理响应结果
}).catch(error => {
// 处理请求错误
});
}
}

上述代码中,fetchData 是发送请求的方法,在方法中使用了 CancelToken 来控制并发多个相同的请求只发送一个。


使用 React 实现


如果你正在使用 React,你可以使用 axios 库来实现控制只发送一个请求的功能。具体实现如下:


import React, { useState } from 'react';
import axios from 'axios';

function App() {
const [requestCount, setRequestCount] = useState(0);

function fetchData() {
if (requestCount === 0) {
setRequestCount(1);
axios.get('http://example.com/api/data')
.then(response => {
console.log(response.data);
setRequestCount(0);
})
.catch(error => {
console.error(error);
setRequestCount(0);
});
}
}

return (
<div>
<button onClick={fetchData}>Fetch Data</button>
</div>

);
}

export default App;

这段代码使用了 React 的 useState 钩子函数,定义了一个状态变量 requestCount,用于记录当前正在发送的请求数量。在发送请求之前,先检查是否已经有一个请求正在处理。如果没有,则将 requestCount 设为 1,表示有一个请求正在处理。在请求成功或失败后,将 requestCount 设为 0,表示请求已经处理完毕。


更多题目


juejin.cn/column

/7201…

0 个评论

要回复文章请先登录注册