前端萌新眼里的Promise与使用

2023-12-14 09:04:54

Promise是JavaScript中表示异步操作的占位符，是为了解决回调地狱的问题而诞生的。在使用Promise之前，我们先来回顾一下回调函数的使用方法：

function myFunction(callback) {
  // 执行异步操作
  setTimeout(() => {
    // 调用回调函数
    callback();
  }, 1000);
}

myFunction(() => {
  // 在异步操作完成后执行的代码
});

上面的代码中，我们定义了一个myFunction函数，它接受一个回调函数作为参数。当myFunction函数被调用时，它会执行一个异步操作，然后调用回调函数。回调函数中的代码将在异步操作完成后执行。

这种使用回调函数的方法虽然能够实现异步操作，但是当需要处理多个异步操作时，就会变得非常复杂和难以维护。为了解决这个问题，Promise应运而生。

Promise是一个对象，它表示一个异步操作的结果。Promise可以处于三种状态：

pending：表示异步操作尚未完成。
fulfilled：表示异步操作已成功完成。
rejected：表示异步操作已失败。

当一个Promise被创建时，它会立即处于pending状态。当异步操作完成后，Promise会根据操作的结果转为fulfilled或rejected状态。

我们使用Promise的then方法来处理异步操作的结果。then方法接受两个参数：一个成功处理函数和一个失败处理函数。当Promise转为fulfilled状态时，就会调用成功处理函数。当Promise转为rejected状态时，就会调用失败处理函数。

const myPromise = new Promise((resolve, reject) => {
  // 执行异步操作
  setTimeout(() => {
    if (成功) {
      // 调用resolve函数，Promise转为fulfilled状态
      resolve('异步操作成功');
    } else {
      // 调用reject函数，Promise转为rejected状态
      reject('异步操作失败');
    }
  }, 1000);
});

myPromise
  .then(
    (result) => {
      // 处理异步操作成功的结果
      console.log(result);
    },
    (error) => {
      // 处理异步操作失败的结果
      console.log(error);
    }
  );