Promise基本概念和三种状态

ECMAScript 6 引入的 Promise 是异步编程的一种解决方案，它解决了传统回调函数嵌套过深的问题。Promise 对象代表一个异步操作的最终完成或失败，并允许以链式调用的方式处理异步操作的结果。

Promise 的基本概念

Promise 是一个对象，用于表示一个异步操作的最终状态（完成或失败）及其结果值。它有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。一旦 Promise 的状态从 pending 变为 fulfilled 或 rejected，就不会再改变。

Promise 的构造函数接受一个函数作为参数，这个函数被称为执行器（executor）。执行器函数有两个参数：resolve 和 reject，它们分别是成功和失败时的回调函数。例如：

const promise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    const randomNumber = Math.random();
    if (randomNumber > 0.5) {
      resolve(randomNumber); // 成功时调用 resolve
    } else {
      reject(new Error('Number is too small')); // 失败时调用 reject
    }
  }, 1000);
});

Promise 的三种状态

1. pending（进行中）

Promise 的初始状态是 pending，表示异步操作尚未完成。此时，Promise 既没有被 resolve，也没有被 reject。例如：

const promise = new Promise((resolve, reject) => {
  // 异步操作尚未完成
  console.log('Promise is pending');
});

console.log(promise); // 输出: Promise { <pending> }

2. fulfilled（已成功）

当 Promise 的状态从 pending 变为 fulfilled，表示异步操作成功完成。此时，resolve 函数被调用，并传递结果值。例如：

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Operation succeeded');
  }, 1000);
});

promise.then((result) => {
  console.log(result); // 输出: Operation succeeded
});

3. rejected（已失败）

当 Promise 的状态从 pending 变为 rejected，表示异步操作失败。此时，reject 函数被调用，并传递错误信息。例如：

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(new Error('Operation failed'));
  }, 1000);
});

promise.catch((error) => {
  console.error(error.message); // 输出: Operation failed
});

Promise 的状态转换

Promise 的状态一旦从 pending 变为 fulfilled 或 rejected，就不可逆。例如：

const promise = new Promise((resolve, reject) => {
  resolve('First resolve'); // 状态变为 fulfilled
  reject(new Error('This will be ignored')); // 无效，状态不会改变
});

promise.then((result) => {
  console.log(result); // 输出: First resolve
});

Promise 的链式调用

Promise 支持链式调用，通过 then 和 catch 方法可以处理异步操作的结果或错误。例如：

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data fetched');
    }, 1000);
  });
};

fetchData()
  .then((data) => {
    console.log(data); // 输出: Data fetched
    return 'Processed data';
  })
  .then((processedData) => {
    console.log(processedData); // 输出: Processed data
  })
  .catch((error) => {
    console.error(error);
  });

Promise 的静态方法

Promise 提供了一些静态方法，用于处理多个 Promise 或创建特定状态的 Promise。

Promise.resolve

Promise.resolve 返回一个状态为 fulfilled 的 Promise。例如：

const resolvedPromise = Promise.resolve('Resolved value');

resolvedPromise.then((value) => {
  console.log(value); // 输出: Resolved value
});

Promise.reject

Promise.reject 返回一个状态为 rejected 的 Promise。例如：

const rejectedPromise = Promise.reject(new Error('Rejected'));

rejectedPromise.catch((error) => {
  console.error(error.message); // 输出: Rejected
});

Promise.all

Promise.all 接收一个 Promise 数组，当所有 Promise 都成功时返回结果数组，否则返回第一个失败的 Promise 的错误。例如：

const promise1 = Promise.resolve('First');
const promise2 = Promise.resolve('Second');
const promise3 = Promise.reject(new Error('Third failed'));

Promise.all([promise1, promise2, promise3])
  .then((results) => {
    console.log(results); // 不会执行
  })
  .catch((error) => {
    console.error(error.message); // 输出: Third failed
  });

Promise.race

Promise.race 接收一个 Promise 数组，返回第一个完成（无论成功或失败）的 Promise 的结果。例如：

const promise1 = new Promise((resolve) => {
  setTimeout(() => resolve('First'), 500);
});
const promise2 = new Promise((resolve) => {
  setTimeout(() => resolve('Second'), 1000);
});

Promise.race([promise1, promise2])
  .then((result) => {
    console.log(result); // 输出: First
  });

Promise 的错误处理

Promise 的错误可以通过 catch 方法捕获，也可以通过 then 的第二个参数捕获。例如：

const promise = new Promise((resolve, reject) => {
  reject(new Error('Something went wrong'));
});

// 方式 1: 使用 catch
promise
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.error(error.message); // 输出: Something went wrong
  });

// 方式 2: 使用 then 的第二个参数
promise.then(
  (result) => {
    console.log(result);
  },
  (error) => {
    console.error(error.message); // 输出: Something went wrong
  }
);

Promise 的实际应用

Promise 在实际开发中常用于处理异步操作，例如网络请求、文件读取等。以下是一个模拟网络请求的例子：

const fetchUserData = (userId) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (userId === 1) {
        resolve({ id: 1, name: 'Alice' });
      } else {
        reject(new Error('User not found'));
      }
    }, 1000);
  });
};

fetchUserData(1)
  .then((user) => {
    console.log(user); // 输出: { id: 1, name: 'Alice' }
  })
  .catch((error) => {
    console.error(error.message);
  });