前端 JavaScript 进阶面试题, Promise.all 和 Promise.race 分别有哪些使用场景?有什么区别?

QA

Step 1

Q:: Promise.all 和 Promise.race 分别有哪些使用场景？有什么区别？

A:: Promise.all 和 Promise.race 都是用于处理多个 Promise 的并发操作。

Promise.all 的使用场景是当你需要等待多个 Promise 都完成，然后再处理结果。例如，当你需要并行加载多个资源，并且在所有资源加载完毕后再进行下一步操作时，可以使用 Promise.all。它会等待所有的 Promise 都 resolved 或者其中有一个 rejected，返回一个包含所有结果的数组。

Promise.race 的使用场景是当你只关心第一个完成的 Promise（无论是 resolved 还是 rejected），例如竞态请求。它会返回第一个 settled（resolved 或 rejected）的 Promise 结果。

Step 2

Q:: Promise.all 和 Promise.race 有什么区别？

A:: Promise.all 会在所有 Promise 都 resolved 或有一个 rejected 时才会返回结果，它返回的是一个包含所有 Promise 结果的数组。如果有任何一个 Promise 被 rejected，那么 Promise.all 也会立即被 rejected。

Promise.race 则是在第一个 Promise settled（resolved 或 rejected）时返回结果，无论其他 Promise 状态如何。Promise.race 返回的是第一个完成的 Promise 的结果。

用途

在前端开发中，处理异步操作是非常常见的场景，尤其是在处理多个并发请求时，例如加载多个 API 数据或多个资源文件。掌握 Promise`.all 和 Promise.`race 的使用场景和区别，能够提高代码的效率和健壮性。\n\n在实际生产环境中，Promise`.all 常用于等待所有并行任务完成再进行下一步操作，确保所有数据都已获取。而 Promise.`race 常用于竞态请求，比如在网络请求中，为了提高用户体验，往往会发出多个请求并采用最快返回的结果。\n

相关问题

🦆

Promise.any 和 Promise.allSettled 的区别是什么?▷

Promise.any 和 Promise.allSettled 也是处理多个 Promise 的方法。

Promise.any 接收一个 Promise 可迭代对象，返回的是第一个 fulfilled 的 Promise 的结果。如果所有的 Promise 都被 rejected，那么它会返回一个 AggregateError 错误。

Promise.allSettled 接收一个 Promise 可迭代对象，返回一个 Promise，该 Promise 在所有的 Promise 都 settled（resolved 或 rejected）后完成，并返回一个对象数组，描述每个 Promise 的结果。

🦆

如何捕获 Promise 中的错误?▷

可以使用 .catch() 方法来捕获 Promise 中的错误。通常在 Promise 链的最后加上 .catch() 来捕获前面所有 Promise 中的错误。此外，还可以在 async/await 语法中使用 try/catch 语句来捕获错误。

示例：

 
fetch('some-api')
  .then(response => response.json())
  .catch(error => console.error('Error:', error));
 
async function fetchData() {
  try {
    const response = await fetch('some-api');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error:', error);
  }
}

🦆

解释一下 JavaScript 中的事件循环Event Loop▷

JavaScript 是单线程语言，通过事件循环机制处理异步任务。事件循环是一种不断检查调用栈和任务队列的机制。

当调用栈为空时，事件循环会查看任务队列中是否有等待执行的任务，如果有，就将其移到调用栈中执行。微任务队列（microtask queue）会在每个宏任务（macrotask）结束后立即处理。

示例：

 
console.log('Start');
setTimeout(() => {
  console.log('Timeout');
}, 0);
Promise.resolve().then(() => {
  console.log('Promise');
});
console.log('End');
// 输出顺序：Start, End, Promise, Timeout

原理说说你对 asyncawait 的理解