如何使用 Promise.all 方法？ [关闭]

Posted 2023-02-27

【中文标题】如何使用 Promise.all 方法？ [关闭]

【英文标题】：how to use Promise.all method? [closed]

【发布时间】：2021-04-13 14:14:52

【问题描述】：

我在使用 Promise.all 时遇到问题 当我尝试循环遍历数组以将元素转换为 json 时，它不起作用，有人能解释一下为什么它不起作用吗？

function getData() 

let getUsers = fetch('https://jsonplaceholder.typicode.com/users')
let getTodos = fetch('https://jsonplaceholder.typicode.com/todos')
Promise.all([getUsers, getTodos])
   .then(data => 
          data.forEach(item => 
            item.json()
            console.log(item));
   )
   .catch(err => console.log(err))
; 
getData();

【问题讨论】：

Promise.all 在fetch 调用数组上将为您提供一组获取响应对象，这些对象将具有json 方法 - 目前尚不清楚您在登录时期望发生什么@ 987654325@.

“不起作用”是什么意思？你遇到了什么错误？是网络错误还是JS错误？将错误作为文本放入您的问题中。

你也没有对item.json() 做任何事情（它也返回一个Promise）。

有什么原因不能使用async function？

item.json() 不会更改或修改 item 并且您不会“保留”返回的数据（这是 not json！）。

【参考方案1】：

更好的主意：将您的 javascript 更改为使用 async function，这意味着您根本不需要使用 Promise.all，如下所示：

async function getData() 

    const usersPromise = fetch('https://jsonplaceholder.typicode.com/users');
    const todosPromise = fetch('https://jsonplaceholder.typicode.com/todos');

    const users = await usersPromise;
    const todos = await todosPromise;

    for( const todo of todos ) 
        console.log( todo );
    


getData();

【参考方案2】：

Promise.all() 接受一个 Promise 数组，returns 一个 Promise 解析为由 Promise 返回的值数组。

例如：

const promiseA = Promise.resolve('valueA');
const promiseB = Promise.resolve('valueB');

Promise.all([promiseA, promiseB]).then(data => 
   console.log(data); // [ 'valueA', 'valueB' ]
)

所以data 是一个数组[ users, todos ]（其中users 是fetch('https://jsonplaceholder.typicode.com/users') 的结果）

function getData() 

let getUsers = fetch('https://jsonplaceholder.typicode.com/users').then(response => response.json())
let getTodos = fetch('https://jsonplaceholder.typicode.com/todos').then(response => response.json())

Promise.all([getUsers, getTodos])
   .then(data => 
         const [users, todos] = data;
          users.forEach(user => 
            console.log(user)
          );
          todos.(todo => 
            console.log(todo)
          );
   )
   .catch(err => console.log(err))
; 
getData();