循环中执行好异步，再继续执行循环（async await ）

已于 2023-02-22 16:32:59 修改
阅读量1.5k 收藏 3
点赞数
分类专栏： 前端 VUE 文章标签： javascript 前端 node.js
于 2022-01-21 10:41:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42221321/article/details/122616091
版权

1、参考链接

参照了下面这位博主的代码
参考链接

2、背景

有4个tab页，鼠标经过切换数据，为了避免频繁请求数据，定义了一个数组保存每个tab页的数据。
一开始是这样做的，在tab第一次鼠标经过的时候去请求数据保存下来，衍生出了一个问题，就是在调用时，鼠标快速经过另一个tab，此时请求数据的函数还没有执行完，这时候tab值发生了改变，数据最后被存储在后一个的tab项里了，导致数据错乱

3、解决思路

为了避免数据错乱的问题，决定页面加载时把所有数据先请求过来，用的for循环，此时会遇到跟上面一样的问题，即数据请求慢的问题，这样在循环走后，就只能获取到最后一个的数据了
使用async await 解决这个问题

// 先声明一个函数，这个函数返回一个promise，promise只有执行返回了resolve才证明已经走完了函数
    getPromise(str = "success") {
   
      return new Promise((resolve) =><
最低0.47元/天 解锁文章
卷毛崽
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何让循环里面语句执行完之后再去循环第二次_Go循环语句的使用
weixin_39727934的博客
12-06 2173
计算机中，我们经常需要对某些代码重复执行多次，一开始我们只懂的多复制几遍来让程序执行package main import "fmt" func main() { fmt.Println("镜头前的你好帅！！") fmt.Println("镜头前的你好帅！！") fmt.Println("镜头前的你好帅！！") fmt.Println("镜头前的你好帅！！") ...
vue.js for循环异步请求，等所有请求返回了，再继续执行下一步请求
CSDNwangyi的博客
08-01 2320
【代码】vue.js for循环异步请求，等所有请求返回了，再继续执行下一步请求。
vue实现循环发起多个异步请求——Promise.all()与Promise.race()
向宇
07-20 3013
vue实现循环发起多个异步请求——Promise.all()与Promise.race()————from 向宇
vue循环发起请求，等一个请求结束后，进行下一次请求
最新发布
Aa12364567的博客
04-16 919
vue循环发起请求，等一个请求结束后，进行下一次请求。
【ES7 async await 依次执行异步，全部执行完，再执行最后的代码】
limuzhixing的博客
07-26 816
ES7 async await 依次执行异步，全部执行完，再执行最后的代码
【vue中循环调用异步方法】在Vue循环中调用异步方法，并在调用结束后才开始下一步循环的方法。
冬瓜的博客
01-10 1109
【vue中循环调用异步方法】在Vue循环中调用异步方法，并在调用结束后才开始下一步循环的方法。
@Async注解函数一次没有执行完会执行下一次么？
Y_jay的博客
09-25 716
缘起 springboot项目中使用了@Async注解，并发操作中会多次使用改函数，使用测试了一下改函数是并发执行还是依次执行。 异步函数： @Override @Async("asyncTaskExecutor") public void test() { logger.info("---------> test start"); int count = 0; for (int i = 0; i < 10000000; i++)
一个函数如何等待所有异步函数都执行完毕后，再返回值
weixin_35750747的博客
12-28 1105
一种方法是使用 JavaScript 中的 Promise 对象。 Promise 对象是一种用于异步编程的工具，它可以在异步操作完成时返回一个值。你可以使用它来包装你的异步函数，然后使用 Promise.all() 方法来等待所有的异步函数都执行完毕。 下面是一个示例： async function processData() { const data1 = await getDataFro...
python 异步async库的使用说明
09-16
同步编程是一种顺序执行的方式，每个任务从头到尾执行，如果在执行过程中遇到阻塞（如I/O操作），整个程序会等待该任务完成后再继续执行下一个任务。这可能导致程序效率低下，特别是在处理大量I/O密集型任务时。 ...
详解JavaScript for循环中发送AJAX请求问题
10-22
这样，for循环会等待每个请求完成后再继续执行下一次迭代。例如： ```javascript xmlHttp.open("GET", url, false); ``` 虽然这种方法确保了请求按顺序执行，但同步请求会阻塞浏览器，直到所有请求完成，用户...
js中setTimeout的妙用--防止循环超时
10-20
在JavaScript中，`setTimeout`是一个非常重要的异步编程工具，它可以用来执行函数或者代码块，但不是立即执行，而是等待指定的时间后才开始执行。在处理某些特定问题时，如防止循环超时，`setTimeout`能展现出其独特...
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
10-17
这使得Generator函数非常适合处理异步操作，因为它可以控制执行流，等待异步操作完成后再继续执行。 在异步操作中，Generator函数常常与`co`库或者`async/await`语法配合使用，以实现更简洁的异步控制流。例如，`...
异步遍历器一个任务结束以后执行下一个
wangkangyang的博客
03-16 57
【代码】异步遍历器一个任务结束以后执行下一个。
循环里面嵌套一个异步请求，所有循环执行完毕后再返回请求的数据
Linda的前端开发路
04-20 1万+
场景介绍： 使用es6实现爬虫，先遍历完列表，然后循环列表的根据url去查询每篇文章的详细内容，最后将所有爬取完的数据写入数据库（只写一次，避免数据库频繁的打开的关闭，影响性能）。 原始实现方式和痛点分析： var list =["url1","url2","url3",.....]; for(let i = 0;i   $.ajax(list[i],function(data){  
for循环中异步请求问题：循环里面使用异步函数，如何等所有的异步函数都执行完再进行下一步
几百块的博客
02-10 4655
在一个列表循环里，对数据进行赋值，调用接口，循环外后面的代码需等待所有请求执行完成后再去执行。 2. for await…of实现（推荐） 这种方法是es6新语法，其介绍如下：for…of 针对可迭代对象身上的（array, map, set, string, typedarray, argements） 迭代的是对象列表中的值（value） ，一般情况遍历数组for…in 针对对象的属性进行无序遍历，除了symbol类的属性 遍历的是属性，一般情况适用于对象遍历该方法使用起来，相比Promise.all要
循环中需要调用异步怎么确保执行完再执行其他的_从底层看前端（五）—— JavaScript代码执行(1)...
weixin_39970994的博客
12-03 524
今天我们来讲一讲JavaScript的执行。首先我们考虑一下，如果我们是浏览器或者node的开发者，我们该如何使用JavaScript引擎呢？当拿到一段JavaScript代码时，浏览器或者node环境首先要做的是：传递给JavaScript引擎，并且要求它去执行。然而，执行JavaScript并非一锤子买卖，宿主环境当遇到一些事件时，会继续把一段代码传递给JavaScript引擎去执行。此外，我...
循环中需要调用异步怎么确保执行完再执行其他的_[译]理解异步JavaScript-事件循环...
weixin_39727976的博客
12-04 260
JavaScript是一种单线程编程语言，这意味着一次只能发生一件事。 也就是说，JavaScript引擎只能在单个线程中一次处理一个语句。虽然单线程语言简化了代码编写，因为你不必担心并发问题，但这也意味着你无法在不阻塞主线程的情况下执行网络访问等长时间操作。想象一下从一个API请求一些数据。 根据不同的情况，服务器可能需要一些时间来处理请求，同时会阻塞了主线程使网页无响应。这就是异步JavaSc...
【vue】for循环里嵌套了异步请求如何使它执行完了再执行下面代码
热门推荐
庭落
05-15 1万+
async updateGood(state) { for (let i = 0; i < this.file.length; i++) { //MVP: await await this.uploadImg(this.file[i]); } console.log(this.oldPhoto.concat(this.imgName)); const res = await updateBasicsProduct({
.net list 异步循环 async await 执行完成后再执行后面代码
09-07
在使用.NET的List异步循环时，我们可以通过async和await关键字来实现在执行完成后再执行后面的代码。异步循环通常用于处理耗时较长的操作，以避免阻塞主线程，提高程序的性能和响应速度。 首先，我们需要在方法的声明中使用async关键字来标识该方法为异步方法。然后，在使用foreach循环遍历List的时候，我们可以使用await关键字来暂停当前的执行，等待异步操作完成。 例如，假设我们有一个List<int> numbers，我们想对其中的每个元素进行异步处理，然后再执行后面的代码。代码示例如下： ```csharp async Task SomeMethod() { List<int> numbers = new List<int> { 1, 2, 3, 4, 5 }; foreach(var number in numbers) { await SomeAsyncOperation(number); // 异步处理 // 执行完成后的代码 Console.WriteLine($"处理完成：{number}"); } // 所有异步操作完成后的代码 Console.WriteLine("所有异步操作已完成"); } async Task SomeAsyncOperation(int number) { // 模拟异步操作 await Task.Delay(1000); Console.WriteLine($"正在处理：{number}"); } ``` 在上述代码中，我们定义了一个SomeMethod方法，其中使用了async关键字来表示该方法为异步方法。在循环遍历List的过程中，我们使用了await关键字来暂停执行，并等待SomeAsyncOperation方法的异步操作完成。 在SomeAsyncOperation方法中，我们使用Task.Delay来模拟一个耗时操作，并输出当前处理的数字。在实际的应用中，你可以替换为实际的异步操作。 当所有的异步操作都完成后，程序会继续执行之后的代码，输出"所有异步操作已完成"。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值