当前位置： 首页 > news >正文

vue中一个页面引入多个相同组件重复请求的问题？

news 2025/11/11 9:26:15

⚠️！！！此内容需要了解一下内容！！！

1、会使用promise？？？

2、 promise跟 async 的区别？？？

async 会终止后面的执行，后续代码都需要等待 await 接收以后再执行，暂停页面执行顺序
promise不会，只要微任务结束，就会执行同步任务

3、宏任务，微任务执行顺序。？？？

如下图，页面调用同一个组件N次，如何进行优化在这里插入图片描述

解决方案1.1：接口返回的 promise 状态进行缓存

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>02多请求cache-then</title>
</head>
<body><script>let cache = null;function getData() {return new Promise((resolve, reject) => {setTimeout(() => {console.log('进入请求接口')// resolve({msg: '请求成功', data: [1,2,3,4]})reject({msg: '请求失败'})}, 100)})}async function initialRequest(msg) {console.log(msg)if (cache) { return cache; }if(!cache) {// 是第 1 个就去请求// （这个示例代码没做容错，自己加）try {cache = await getData()/*不使用awaitcache = getData()缺点：请求失败的不好处理，每一个调用initialRequest函数，都需要.catch,代码冗余使用 awaitcache = await getData()代码逻辑错误：每一次 initialRequest 函数都会执行，都会产生自己的 getData 函数*/} catch(error) {cache = nullinitialRequest('报错请求')}}console.log('使用async，if判断之外的也不会执行')return cache;}
debuggerinitialRequest('第一请求').then((res) => {console.log('一请求--res', res)})initialRequest('第二请求').then((res) => {console.log('二请求--res', res)})</script>
</body>
</html>

有缺陷，在initialRequest函数中

1、不使用await
cache = getData()
缺点：请求失败的不好处理，每一个调用initialRequest函数，都需要.catch,代码冗余2、使用 awaitcache = await getData()
代码逻辑错误：每一次 initialRequest 函数都会执行，都会产生自己的 getData 函数

方案1.2：增加睡眠函数，配合async await 完美使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>02多请求cache-async</title>
</head>
<body><script>let cache = null;let count = 0;let flag = falsefunction getData() {return new Promise((resolve, reject) => {setTimeout(() => {console.log('进入请求接口')if (!flag) {reject({msg: '请求失败'})flag = true} else {resolve({msg: '请求成功', data: [1,2,3,4]})}}, 100)})}async function delay(ms = 200) {return new Promise(resolve => {console.log('进入睡眠函数')setTimeout(resolve, ms) // 200 毫秒以后执行这个promise});}async function initialRequest(msg) {console.log(msg)if (cache) { return cache; }if (count++) {// 如果有计数说明自己不是第 1 个，就等。注意这里判断的是加之前的 count// 循环里最好再加个超时判断while (!cache) { const abc = await delay();console.log('await会阻止向下循环', abc)} // 睡眠是什么意思} else {try {cache = await getData();} catch(error) {// 判断如果第一个接口请求失败，重新发起请求，直到成功count--cache = await getData();// cache = error}/*使用这个的好处，是从第二次的delay执行完之后都会获取到第一次 getData 执行的结果，不用每个函数都添加catch监听错误信息，也可以在try catch中做兼容处理，加入请求失败了，再次发起请求*/}console.log('使用async，if判断之外的也不会执行')count--;    // 记得减回去，方便以后如果要刷新 cache 的时候用return cache;}
debuggerinitialRequest('第一请求').then((res) => {console.log('一请求--res', res)})initialRequest('第二请求').then((res) => {console.log('二请求--res', res)})initialRequest('第三请求').then((res) => {console.log('三请求--res', res)})/*  */</script>
</body>
</html>

好处：1、如果第一个请求接口异常，可捕获错误，重新发起请求，不影响后面睡眠的函数，最终只需要接收 cache 就行。

2、不用每个函数都添加catch监听错误信息，也可以在try catch中做兼容处理，请求失败了，可再次发起请求（看try catch部分）

那么要做什么文章呢？我们假设这个页面引入多个相同的组件，都是调用同一个 initailRequest 方法。那么在这个方法外部添加一个缓存 cache，组件每次先从这个缓存对象查找存不存在配置数据。如果存在直接获取缓存对象，如果不存在就调用接口获取。但光是这样效果还是和方案1.0结果一样的，同样会调用30次接口。所以我们还需要加一个计数器变量 count。count 的初始值是0，initailRequest 组件每次发送请求时都会给 count 加1。这样子当我们发现是第一次请求时就去调用接口，不是第一次的话就等待，直到第一次请求结束获得数据。逻辑流程图如下：

请添加图片描述

参考链接：
从解决一个页面请求太多的问题开始的
promise/ async await 的区别

相关文章：

vue中一个页面引入多个相同组件重复请求的问题？

⚠️&#xff01;&#xff01;&#xff01;此内容需要了解一下内容&#xff01;&#xff01;&#xff01; 1、会使用promise&#xff1f;&#xff1f;&#xff1f; 2、 promise跟 async 的区别&#xff1f;&#xff1f;&#xff1f; async 会终止后面的执行&#xff0c;后续…...

编程日记 2023/11/16 23:28:52

Uniapp连接iBeacon设备——实现无线定位与互动体验（实现篇）

export default { data() { return { iBeaconDevices: [], // 存储搜索到的iBeacon设备 deviceId: [], data: [], url: getApp().globalData.url, innerAudioContext: n…...

编程日记 2023/11/16 23:27:51

【ceph】ceph集群删除pool报错： “EPERM: pool deletion is disabled“

本站以分享各种运维经验和运维所需要的技能为主 《python零基础入门》&#xff1a;python零基础入门学习 《python运维脚本》&#xff1a; python运维脚本实践 《shell》&#xff1a;shell学习 《terraform》持续更新中&#xff1a;terraform_Aws学习零基础入门到最佳实战 《k8…...

编程日记 2023/11/16 23:26:50

【微信小程序】使用npm包

1、小程序对npm的支持与限制2、Vant Weapp通过 npm 安装修改 app.json修改 project.config.json构建 npm 包 3、使用4、定制全局主题样式5、API Promise化 1、小程序对npm的支持与限制 目前&#xff0c;小程序中已经支持使用npm安装第三方包&#xff0c; 从而来提高小程序的开发…...

编程日记 2023/11/16 23:24:47

【开发记录篇】第二篇：SQL创建分区表

实现分区表注意事项 分区字段必须在主键中存在 使用时间分区时&#xff0c;字段类型不支持 timestamp&#xff0c;需改为 datetime 年分区示例 下表中使用 insert_time 时间进行分区 CREATE TABLE t_log (id bigint(20) unsigned NOT NULL AUTO_INCREMENT COMMENT 日志ID,inse…...

编程日记 2023/11/16 23:23:46

vue 使用 this.$router.push 传参数，接参数的 query或params 两种方法示例

背景&#xff1a;vue项目 使用this.$router.push进行路由跳转时&#xff0c;可以通过query或params参数传递和接收参数。 通过query参数传递参数&#xff1a; // 传递参数 this.$router.push({path: /target,query: {id: 1,name: John} }); // 接收参数 this.$route.query.id …...

编程日记 2023/11/16 23:22:45

rk3588 usb网络共享连接

出门在外总会遇到傻 X 地方 没有能连接公网的 网口给香橙派连网 而我的香橙派5plus 没有wifi模块。。。话不多说 在手机上看一眼手机的mac地址&#xff0c; 在rk3588 上执行以下命令&#xff1a; sudo ifconfig usb0 down sudo ifconfig usb0 hw ether 58:F2:FC:5D:D4:7A //该m…...

编程日记 2023/11/16 23:21:44

shell 拒绝恶意连接脚本 centos7.x拒绝恶意连接脚本

1. crontab -l 脚本频率&#xff1a; */2 * * * * /bin/bash /home/shell/deny.sh 2. 脚本&#xff1a; rm -rf /home/shell/ip_list cat /var/log/secure | grep "Failed password for" | awk {print$(NF-3)} | sort | uniq -c > /home/shell/ip_list #cat /va…...

编程日记 2023/11/16 23:19:42

【系统架构设计】计算机公共基础知识： 2 计算机系统基础知识

目录 一 计算机系统组成 二 操作系统 三 文件系统 四 系统性能 一 计算机系统组成...

编程日记 2023/11/16 23:17:39

什么是代理模式，用 Python 如何实现 Proxy（代理 或 Surrogate）对象结构型模式？

什么是代理模式&#xff1f; 代理&#xff08;Proxy&#xff09;是一种结构型设计模式&#xff0c;其目的是通过引入一个代理对象来控制对另一个对象的访问。代理对象充当目标对象的接口&#xff0c;这样客户端就可以通过代理对象间接地访问目标对象&#xff0c;从而在访问过程…...

编程日记 2023/11/16 23:16:38

国内领先的五大API接口供应商

API&#xff08;Application Programming Interface&#xff09;接口&#xff0c;现在很多应用系统中常用的开放接口&#xff0c;对接相应的系统、软件功能&#xff0c;简化专业化的程序开发。作者用过的国内比较稳定的API接口供应商有如下几家&#xff0c;大家可以参考选择&am…...

编程日记 2023/11/16 23:15:37

第十九章 Java绘图

一&#xff0c;Java绘图类 19.1.1Graphics类 Graphics类是所有图形上下文的抽象基类&#xff0c;它允许应用程序在组件以及闭屏图像上进行绘制。 可实现直线&#xff0c;矩形&#xff0c;多边形&#xff0c;椭圆&#xff0c;圆弧等形状和文本&#xff0c;图片的绘制制作。 …...

编程日记 2023/11/16 23:14:36

【C++面向对象】13. 接口 / 抽象类*

文章目录 【 1. 抽象类 】1.1 抽象类的定义1.2 抽象类的应用条件1.3 实例 【 2. 设计策略 】 接口描述了类的行为和功能&#xff0c;而不需要完成类的特定实现。C 接口是使用 抽象类&#xff08;abstract base class&#xff0c;也称为ABC&#xff09; 来实现的。 【 1. 抽象类…...

编程日记 2023/11/16 23:13:35

LeetCode热题100——二分查找

二分查找 1. 搜索插入位置2. 搜素二维矩阵3. 在排序数组中查找第一个和最后一个元素位置 1. 搜索插入位置 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 // 题…...

编程日记 2023/11/16 23:12:34

使用VC++实现分段线性变换，直方图均衡化、锐化处理（使用拉普拉斯算子）

图像锐化1 实验要求 5.1实验目的、要求 实验目的&#xff1a; &#xff08;1&#xff09;掌握图像增强的原理与相关方法。 &#xff08;2&#xff09;能使用VC实现图像增强的一些相关功能。 实验要求&#xff1a; A部分&#xff1a; &#xff08;1&#xff09;对一幅256级灰度…...

编程日记 2023/11/16 23:11:33

react class改hooks写法

类头修改 export default class EditUseTable extends Component 改为 export default function EditUseTable({})参数修改 constructor(props) {super(props)const {dbRecord, type, currentRecord, readOnly, updateTaxAmount} this.props改为&#xff08;主函数的参数&a…...

编程日记 2023/11/16 23:10:32

桂院校园导航 | 云上高校导航 云开发项目 二次开发教程 1.3

Gitee代码仓库&#xff1a;桂院校园导航小程序 GitHub代码仓库&#xff1a;GLU-Campus-Guide 演示视频 中国大学生计算机设计大赛-移动应用与开发-云上高校导航 升级日志 1.3 优化了小程序的数据存储方式&#xff0c;对部分页面进行了调整&#xff0c;调整了功能和代码。 引…...

编程日记 2023/11/16 23:09:31

sscanf提取相应字符到数组

代码如下 #include<stdio.h> #include<string.h>int main(int argc, char const *argv[]) {char buf[128] {0};int m1 0, m2 0;int s1 0, s2 0;char lrc[128] "";sscanf("[02:16.33][04:11.44]我想大声宣布对你恋恋不舍","[%*1d%d…...

编程日记 2023/11/16 23:08:30

本地开发环境和服务器传输数据的几种方法

❤️觉得内容不错的话&#xff0c;欢迎点赞收藏加关注&#x1f60a;&#x1f60a;&#x1f60a;&#xff0c;后续会继续输入更多优质内容❤️ &#x1f449;有问题欢迎大家加关注私戳或者评论&#xff08;包括但不限于NLP算法相关&#xff0c;linux学习相关&#xff0c;读研读博…...

编程日记 2023/11/16 23:07:28

LeetCode之二叉树

发现更多计算机知识&#xff0c;欢迎访问Cr不是铬的个人网站 最近数据结构学到二叉树&#xff0c;就刷了刷力扣&#xff0c;写这篇文章也是辅助记忆。 103二叉树锯齿形遍历 要解出本道题&#xff0c;首先要会层次遍历。层次遍历我们都知道用一个队列去实现就行。但是力扣这里…...

编程日记 2023/11/16 23:06:27

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”&#xff0c;无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息&#xff1a; 关注测试号&#xff1a;扫二维码关注测试号。 发送模版消息&#xff1a; import requests da…...

编程新知 2025/11/7 9:55:25

以下是对华为 HarmonyOS NETX 5属性动画（ArkTS）文档的结构化整理，通过层级标题、表格和代码块提升可读性：

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

编程新知 2025/11/7 20:04:02

将对透视变换后的图像使用Otsu进行阈值化，来分离黑色和白色像素。这句话中的Otsu是什么意思？

Otsu 是一种自动阈值化方法&#xff0c;用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理&#xff0c;能够自动确定一个阈值&#xff0c;将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

编程新知 2025/10/11 3:56:08

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置&#xff0c;使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

编程新知 2025/11/10 0:12:43

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

编程新知 2025/11/3 2:11:24

DeepSeek 技术赋能无人农场协同作业：用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

编程新知 2025/9/24 13:35:36

解读《网络安全法》最新修订，把握网络安全新趋势

《网络安全法》自2017年施行以来&#xff0c;在维护网络空间安全方面发挥了重要作用。但随着网络环境的日益复杂&#xff0c;网络攻击、数据泄露等事件频发&#xff0c;现行法律已难以完全适应新的风险挑战。 2025年3月28日&#xff0c;国家网信办会同相关部门起草了《网络安全…...

编程新知 2025/11/10 22:39:47

深入浅出Diffusion模型：从原理到实践的全方位教程

I. 引言&#xff1a;生成式AI的黎明 – Diffusion模型是什么&#xff1f; 近年来&#xff0c;生成式人工智能&#xff08;Generative AI&#xff09;领域取得了爆炸性的进展&#xff0c;模型能够根据简单的文本提示创作出逼真的图像、连贯的文本&#xff0c;乃至更多令人惊叹的…...

编程新知 2025/9/12 5:25:46

书籍“之“字形打印矩阵(8)0609

题目 给定一个矩阵matrix&#xff0c;按照"之"字形的方式打印这个矩阵&#xff0c;例如&#xff1a; 1 2 3 4 5 6 7 8 9 10 11 12 ”之“字形打印的结果为&#xff1a;1&#xff0c;…...

编程新知 2025/10/14 13:57:04

倒装芯片凸点成型工艺

UBM&#xff08;Under Bump Metallization&#xff09;与Bump&#xff08;焊球&#xff09;形成工艺流程。我们可以将整张流程图分为三大阶段来理解&#xff1a; &#x1f527; 一、UBM&#xff08;Under Bump Metallization&#xff09;工艺流程&#xff08;黄色区域&#xff…...

编程新知 2025/11/9 17:07:54