js Promise 等待多个异步操作执行完再去做一些操作

Posted 2023-05-04

参考技术A 在我们的程序中有些操作是需要等到一些接口的数据返回之后才能做的操作
比如我们在一个页面需要发送好几个请求，这几个请求都发送完了我们再去隐藏 loading效果，一开始我是这样操作的：

执行效果：

只是返回了 失败回调，这显然不是我们想要的效果

但是，我们写好的时候，使用 Promise.all()方法的时候，想起来，Promise.all()这个方法，只要这个方法的任意一个 promise有reject也就是失败状态的时候，promise 不管剩余的其他的promise 是否完成，就会停止当前的监听，那就有可能丢失当前的 其他请求的状态和结果，所以我们在写的时候，就应该考虑，我们当前promise的执行权是不是应该交给当前单个promise的回调具体应该怎么操作呢

执行效果：

然后我们判断，返回结果的 数组的长度是否等于传入数组的长度，就能知道请求是发送完成了（不管请求结果是怎样）；
完！！

Promise.all（）函数中的JS“等待仅在异步函数中有效”[重复]

【中文标题】Promise.all（）函数中的JS“等待仅在异步函数中有效”[重复]

【英文标题】：JS 'await is only valid in async function' in Promise.all() function [duplicate]

【发布时间】：2019-10-19 06:09:39

【问题描述】：

我正在尝试使用 Promise.all() 函数将一堆请求等待所有请求完成，而不是像这样手动完成所有获取：

var data = await Promise.all([
        fetch('https://jsonplaceholder.typicode.com/posts').then((response) => response.json()),
        fetch('https://jsonplaceholder.typicode.com/albums').then((response) => response.json()),
        fetch('https://jsonplaceholder.typicode.com/users').then((response) => response.json())
      ]);

我想让它动态化，像这样发出 N 个获取请求：

       let promiseList = [];
        try 
            for (let url of requestUrls) 
                promiseList.push(fetch(url).then((response) => response.json()));
            

            var data = await Promise.all(promiseList);

但我在await Promise.all() 行中收到此错误Uncaught SyntaxError: await is only valid in async function，如果我删除等待，我会收到Promise <pending> 和 (index):79 error:TypeError: data is not iterable

这是我的完整代码：https://jsfiddle.net/ham7g82e/1/

从这些获取中获取数据我缺少什么？

【问题讨论】：

错误信息的哪一部分你不明白？

你应该使用.map()

你的await 的父函数没有async 运算符如async function myFunc() ... ，我们需要看看你是如何定义包装函数的。

***.com/questions/31710768/…

【参考方案1】：

不要使用 await，而是使用 Promise.then

Promise.all(promiseList).then(data => 
  document.getElementById("result").innerHTML = data;
  console.log(data);

  for (var i of data) 
    console.log(`RESPONSE ITEM \n`);
      for (var obj of i) 
        console.log(obj);

      
  
);

【参考方案2】：

要使用 await，它必须是异步函数的一部分。

async function functionName() 
 //You can use await in here, because you used the async keyword

【讨论】：

函数和方法都是 JavaScript 中的函数。

函数是window对象的方法，所以没有区别

谢谢！我没有正式学习JS。我编辑了我的答案:)

【参考方案3】：

如果执行此代码的函数不是异步的，您可以使用 .then() 从 Promise 中获取值。不需要使用 await。

查看此文档：Promise.all()