Promise 如何在 Javascript 中使用

Promise 在 JavaScript 中用于处理异步操作、确保代码顺序执行、以及避免回调地狱。它代表了一个尚未完成但预期将来会完成的异步操作的结果。扩展描述：Promise 对象有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。创建一个Promise后，它从pending状态开始，然后可以变为fulfilled或者rejected状态。使用.then()方法来处理resolved状态，以及.catch()来处理rejected状态。

一、PROMISE 基础

Promise 对象是异步编程的一种解决方案。首先，了解一下如何创建一个Promise。

创建 PROMISE

要创建一个新的Promise对象，可以使用其构造函数 new Promise()，这时你需要传递一个执行器函数（executor）作为参数：

const myPromise = new Promise((resolve, reject) => {
  // 异步操作代码
  if (/* 异步操作成功 */) {
    resolve('Operation successful');
  } else {
    reject('Operation fAIled');
  }
});

执行器函数接受两个参数，resolve 和 reject，分别在异步操作成功或失败时调用。

使用 THEN 和 CATCH

创建Promise后，可以使用.then()来设置resolved状态的回调，以及.catch()来设置rejected状态的回调。

myPromise.then((value) => {
  console.log(value); // 处理fulfilled状态的值
}).catch((error) => {
  console.error(error); // 处理rejected状态的错误
});

二、PROMISE 链式调用

Promise 的一个关键特性是支持链式调用，允许多个异步任务顺序执行。

链式 THEN 调用

.then()方法可以被链式调用，下一个.then()会接收上一个.then()的返回值作为参数：

const promiseChain = new Promise((resolve, reject) => {
  resolve(1);
});
promiseChain.then((value) => {
  console.log(value); // 输出 1
  return value + 1;
}).then((value) => {
  console.log(value); // 输出 2
  return value + 1;
}).then((value) => {
  console.log(value); // 输出 3
});

错误传递

如果链中的某个Promise被reject，后续的.then()将会被跳过，直到遇到一个.catch()：

myPromise.then((value) => {
  // 第一个then
  return value; // value被传递到下一个then
}).then((value) => {
  throw new Error('Something failed');
  // 抛出错误，下一个then将被跳过
}).then((value) => {
  // 被跳过的then
  return value;
}).catch((error) => {
  console.error(error); // 报错“Something failed”
});

三、PROMISE 高级用法

Promise 提供更丰富的方法来处理复杂的异步操作。

PROMISE.ALL

当你想要并行执行多个异步操作，并在它们都完成时得到通知时，可以使用 Promise.all() 方法：

Promise.all([promise1, promise2]).then((results) => {
  // 当所有的promise都完成时结果会按顺序存储在results数组中
  const [result1, result2] = results;
}).catch((error) => {
  // 如果任何一个promise失败，则整个Promise.all被视为失败
  console.error(error);
});

PROMISE.RACE

Promise.race() 是另一种并行控制方法，它会解析或拒绝第一个解析或拒绝的promise：

Promise.race([promise1, promise2]).then((result) => {
  // 第一个完成的promise的结果
}).catch((error) => {
  // 第一个失败的promise的错误
});

四、PROMISE 异常处理

在异步编程中，异常处理同样重要，Promise 提供了.catch()方法来捕获异常。

异常捕获

在Promise链中任何一个rejected的promise，如果未被.catch()捕获，都会抛出一个未捕获的exception：

myPromise.then((value) => {
  return value;
}).then((value) => {
  throw new Error('Error in promise chain');
  // 错误被抛出
}).catch((error) => {
  console.error(error); // 捕获错误
});

未处理的异步错误

如果.catch()在链的末端，它将捕获链中的任何错误。但如果漏掉了.catch()，可能会导致难以追踪的异步错误。

五、PROMISE 和异步函数

async和await关键字允许编写看起来像同步代码的异步代码。

ASYNC 函数

async函数返回一个Promise。当函数体返回一个值时，Promise将会resolve此值，如果抛出异常，Promise将会被reject。

async function fetchWithAsync() {
  const response = await fetch('https://api.example.com');
  const data = await response.json();
  return data;
}
fetchWithAsync().then(data => {
  console.log(data);
}).catch(error => {
  console.error(error);
});

AWAIT 错误处理

在async函数中，可以使用try-catch结构来直接处理错误：

async function fetchWithAsyncWithErrorHandling() {
  try {
    const response = await fetch('https://api.example.com');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

Promise 提供了强大的异步控制能力，它允许链式调用、并行执行异步任务，以及内建的错误处理机制。通过将Promise与async和await相结合，开发者能够以接近同步编程的方式写异步代码，从而提高代码的可读性和维护性。