如何使用Promise.all方法？

Question

我在使用 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();

Answer 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();

Answer 2

Promise.all() 接受一个 Promise 数组，returns 一个解析为由 promises 返回的值数组的 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();

如何使用Promise.all方法？

how to use Promise.all method?

javascript

fetch

promise

fetch-api