Vue3中发送请求时，如何解决重复请求发送问题？

---

前言

在开发过程中，重复请求发送问题可能会导致数据不一致、服务器压力增加或用户操作异常。以下是解决重复请求问题的常见方法和最佳实践：

---

一、问题演示

我们看着两个数据都是一样的，都是通过发送请求获取的，我们怎么才能只发一次呢？

二、使用步骤

1.One组件

代码如下（示例）：

<template><ul><li v-for="item in list" :key="item.id">{{ item.name }}-{{ item.age }}--{{ item.email }}</li></ul>
</template><script setup>
import { ref } from 'vue'
import { getData } from '@/utils/loadData'const list = ref([])// 获取数据
getData(1).then((res) => {list.value = res
})
</script><style lang="scss" scoped></style>

2.Two组件

代码如下（示例）：

<template><ul><li v-for="item in list" :key="item.id">{{ item.name }}-{{ item.age }}--{{ item.email }}</li></ul>
</template><script setup>
import { ref } from 'vue'
import { getData } from '@/utils/loadData'
const list = ref([])// 获取数据
getData(2).then((res) => {list.value = res
})
</script><style lang="scss" scoped></style>

封装工具函数处理请求

解决思路:就是通过isLoading的状态去做判断。如果发现已经发送了一次请求，下一次在发送就直接得到上一次的返回结果进行返回。

import axios from 'axios'
export const loadData = (id: number) => {return axios.get('/src/json/data.json', {params: { id }}).then((res) => {return res.data})
}export const asyncFun = (cb: (...args: any[]) => Promise<any>) => {const map: Record<string, any> = {}return (...args: any[]) => {return new Promise((resolve, reject) => {const key = JSON.stringify(args)console.log('Request started for key:', key, 'Current map:', map)if (!map[key]) {map[key] = {resolve: [],reject: [],isLoading: false}}const stock = map[key]stock.resolve.push(resolve)stock.reject.push(reject)if (stock.isLoading) {console.log('Request already in progress for key:', key)return}stock.isLoading = trueconsole.log('Making actual request for key:', key)cb(...args).then((res) => {console.log('Request succeeded for key:', key)stock.resolve.forEach((resolve: any) => resolve(res))}).catch((err) => {console.log('Request failed for key:', key, 'Error:', err)stock.reject.forEach((reject: any) => reject(err))}).finally(() => {console.log('Clearing cache for key:', key)map[key] = null})})}
}export const getData = asyncFun(loadData) as typeof loadData

---

效果：只发送了一次请求（相同请求）

总结

以上就是今天要讲的内容，本文仅仅简单介绍了异步请求发送时重复问题，可以减少服务器压力提高性能。