以最通俗的语言理解 promise

前端

2023-12-30 10:43:15

Promise 的诞生背景

在前端开发中，经常会遇到需要处理异步操作的情况，如网络请求、定时器、文件读写等。这些操作的特点是，在执行时不会立即返回结果，而是需要等待一段时间才能获得。

在传统的回调函数中，需要在异步操作完成后再执行后续的操作，这种方式容易导致代码逻辑混乱，可读性差。为了解决这个问题，JavaScript 中引入了 Promise 对象。

Promise 的基本原理

Promise 是一个表示异步操作的最终结果的对象。它有三种状态：

Pending（等待）： 初始状态，表示异步操作尚未完成。
Fulfilled（已完成）： 表示异步操作已成功完成，并具有一个结果值。
Rejected（已拒绝）： 表示异步操作已失败，并具有一个错误值。

Promise 的用法

使用 Promise 时，需要先创建一个 Promise 对象，然后在异步操作完成后，调用 resolve() 或 reject() 方法来改变 Promise 的状态。

// 创建一个 Promise 对象
const promise = new Promise((resolve, reject) => {
  // 执行异步操作
  setTimeout(() => {
    // 如果异步操作成功，调用 resolve() 方法，并将结果值作为参数传递
    resolve('成功');
  }, 1000);
});

// 在 Promise 对象上添加一个 then() 方法，以便在 Promise 状态改变时执行相应的处理逻辑
promise.then(
  // 如果 Promise 状态为 Fulfilled，则执行此函数
  (result) => {
    console.log('成功：', result);
  },
  // 如果 Promise 状态为 Rejected，则执行此函数
  (error) => {
    console.log('失败：', error);
  }
);