介绍Promise是怎样工作的

Promise 是 JavaScript 中的一种用于处理异步操作的对象。它提供了一种更清晰、更简洁的方式来管理异步操作的结果，避免传统的嵌套回调（俗称“回调地狱”）问题。

基本概念

1. 状态（State）：

   • pending（待定）: 初始状态，既不是成功也不是失败。
   • fulfilled（已完成）: 表示操作成功完成。
   • rejected（已拒绝）: 表示操作失败。

2. 结果（Result）：

   • 如果 Promise 进入 fulfilled 状态，结果会是一个值。
   • 如果 Promise 进入 rejected 状态，结果会是一个错误原因。

3. 不可逆性： 一旦状态变为 fulfilled 或 rejected，就无法再更改。

---

创建一个 Promise

const promise = new Promise((resolve, reject) => {
  // 异步操作
  const success = true; // 假设这是异步操作的结果
  if (success) {
    resolve('操作成功'); // 调用 resolve 表示成功
  } else {
    reject('操作失败'); // 调用 reject 表示失败
  }
});

---

使用 Promise

promise
  .then(result => {
    console.log('成功:', result); // 处理成功结果
  })
  .catch(error => {
    console.error('失败:', error); // 处理失败结果
  })
  .finally(() => {
    console.log('操作结束'); // 无论成功或失败，都会执行
  });

---

Promise 的工作原理

1. 当创建一个 Promise 时，传递给它的函数（executor）会立即执行。
2. resolve 和 reject 是 executor 函数的两个回调参数，分别用于标记操作成功或失败。
3. Promise 一旦 resolve 或 reject，会触发 .then 或 .catch 中的回调函数。
4. .finally 的回调函数在状态改变后总会执行，无论是成功还是失败。

---

实用例子

模拟异步操作（如 API 调用）

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = { name: '张三', age: 25 };
      resolve(data); // 模拟成功
      // reject('获取数据失败'); // 模拟失败
    }, 2000); // 模拟 2 秒延迟
  });
}

fetchData()
  .then(data => {
    console.log('获取数据成功:', data);
  })
  .catch(error => {
    console.error('获取数据失败:', error);
  })
  .finally(() => {
    console.log('数据请求结束');
  });

---

Promise 链式调用

Promise 支持链式调用，便于组织多个异步操作。

fetchData()
  .then(data => {
    console.log('第一步:', data);
    return data.name; // 返回值会作为下一个 then 的输入
  })
  .then(name => {
    console.log('第二步: 用户名是', name);
    return name.toUpperCase();
  })
  .then(uppercaseName => {
    console.log('第三步: 用户名大写是', uppercaseName);
  })
  .catch(error => {
    console.error('发生错误:', error);
  });

---

优势

1. 避免回调地狱。
2. 提供了更好的错误处理机制（catch 和 finally）。
3. 支持链式调用，逻辑更清晰。

---

常用方法

1. Promise.all 等待所有 Promise 完成，如果有一个失败，则返回失败。

   Promise.all([promise1, promise2, promise3])
     .then(results => console.log('所有成功:', results))
     .catch(error => console.error('有失败:', error));
   

2. Promise.race 返回第一个完成的 Promise（无论成功或失败）。

   Promise.race([promise1, promise2, promise3])
     .then(result => console.log('第一个完成:', result))
     .catch(error => console.error('第一个失败:', error));
   

3. Promise.allSettled 等待所有 Promise 完成，不管成功或失败。

   Promise.allSettled([promise1, promise2, promise3])
     .then(results => console.log('结果:', results));
   

4. Promise.any 返回第一个成功的 Promise，如果所有都失败则报错。

   Promise.any([promise1, promise2, promise3])
     .then(result => console.log('第一个成功:', result))
     .catch(error => console.error('所有失败:', error));
   

如果你有进一步的需求，欢迎随时补充！