前端面试Promise高频

 📘 JavaScript 中的 Promise

Promise 是 JavaScript 中表示异步操作最终完成或失败及其结果值的对象。它改进了传统的基于回调的异步编程方式，帮助更容易地管理和链接异步操作。

Promise 的核心概念

1. Promise 的状态
   • Pending: 初始状态，操作未完成。
   • Fulfilled: 操作成功完成。
   • Rejected: 操作失败。
2. 方法
   • then(): 绑定处理成功的回调函数。
   • catch(): 绑定处理失败的回调函数。
   • finally(): 无论结果如何都会执行的回调函数。
3. 链式调用
   • Promises 可以通过链式调用处理一系列异步操作，这有助于避免“回调地狱”，使代码更具可读性。

Promise基本示例

let promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve("成功!"), 1000);
});

promise.then(result => console.log(result)) // "成功!"
       .catch(error => console.log(error))
       .finally(() => console.log("操作完成"));

---

🔗 Promise 特殊方法

Promise.all

Promise.all 接受一个 Promise 的数组，并返回一个新的 Promise。只有当所有传入的 Promise 全部解决时，返回的 Promise 才会解决，否则会在第一个被拒绝的 Promise 被拒绝时，返回一个被拒绝的 Promise。

使用场景

• 适用于需要同时处理多个异步操作，并且希望在所有操作完成后继续处理的场景。

示例

let promise1 = Promise.resolve(1);
let promise2 = Promise.resolve(2);
let promise3 = Promise.resolve(3);

Promise.all([promise1, promise2, promise3])
  .then(values => console.log(values))  // [1, 2, 3]
  .catch(error => console.log(error));

Promise.race

Promise.race 也接受一个 Promise 的数组，并返回一个新的 Promise。返回的 Promise 以第一个解决或拒绝的 Promise 的结果为结果。

使用场景

• 适用于希望在多个异步操作中只处理最先完成的结果的场景。

示例

let promise1 = new Promise((resolve) => setTimeout(resolve, 100, 'first'));
let promise2 = new Promise((resolve) => setTimeout(resolve, 200, 'second'));

Promise.race([promise1, promise2])
  .then(value => console.log(value))  // 'first'
  .catch(error => console.log(error));

---

🔄 JavaScript 中的 async/await

async/await 简介

async/await 是 ES8（ECMAScript 2017）中引入的语法，用于以更同步的方式编写异步代码。它建立在 Promises 之上，提供了更简洁的方式来处理异步操作，特别是处理多个异步调用时。

async/await 的核心概念

1. async 函数
   • 声明一个函数为异步函数，该函数返回一个 Promise。函数返回的值会被封装成 Promise，函数内部抛出的错误会导致 Promise 被拒绝。
2. await 关键字
   • 只能在 async 函数内部使用。它会暂停函数的执行，等待 Promise 解决并返回结果。
3. 错误处理
   • 使用 try/catch 块来处理 await 表达式中的错误，与同步代码的错误处理方式类似。

示例

async function fetchData() {
  try {
    let response = await fetch('<https://api.example.com/data>');
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('错误:', error);
  }
}

fetchData();

---

⚖️ Promise 和 async/await 的比较

方面	Promise	async/await
语法	使用 .then()、.catch() 和 .finally() 链式调用	使用 async 和 await 实现类似同步的语法
错误处理	使用 .catch() 方法处理错误	使用 try/catch 块处理错误
可读性	多个 .then() 调用可能导致代码复杂	代码更简洁，可读性更强，特别适合顺序操作
使用场景	适用于简单异步操作和并行执行	更适合顺序和依赖性较强的异步操作

结论

• 对于简单的异步操作和并行执行任务，使用 Promises 更合适。
• 对于更复杂的顺序异步任务和提高代码可读性，使用 async/await 是更好的选择。