深入浅出：解锁Promise学习笔记，助你轻松迎接8月更文挑战！

前端

2024-01-19 23:16:14

什么是Promise？
Promise的特性
Promise的用法
Promise的常见面试题
手写Promise

正文

什么是Promise？

Promise是一个ES6引入的新语法，它提供了一种处理异步操作的更优雅、更强大的方式。它允许你将异步操作的结果作为值来处理，就像它们是同步操作的结果一样。

Promise的特性

Promise具有以下几个特性：

状态只能改变一次。 Promise的状态只能从pending（等待）变为fulfilled（已完成）或rejected（已拒绝），并且一旦改变后就不能再改变。
可以通过链式调用来处理结果。 Promise支持链式调用，这意味着你可以将多个Promise对象串联起来，以便在完成一个操作后自动执行下一个操作。
可以通过catch()方法来捕获错误。 如果Promise对象的状态变为rejected，你可以通过catch()方法来捕获错误并进行相应的处理。

Promise的用法

Promise的用法非常简单，它主要包括以下几个步骤：

创建一个Promise对象。
在Promise对象中定义一个执行器函数。
在执行器函数中执行异步操作。
在异步操作完成后，使用resolve()或reject()方法来改变Promise对象的状态。
在Promise对象的状态改变后，可以使用then()或catch()方法来处理结果。

示例：

const promise = new Promise((resolve, reject) => {
  // 执行异步操作
  setTimeout(() => {
    // 操作成功时调用resolve()
    resolve("操作成功！");
  }, 1000);
});

// 处理Promise对象的状态
promise.then((result) => {
  // 操作成功时执行
  console.log(result); // 输出："操作成功！"
}).catch((error) => {
  // 操作失败时执行
  console.log(error);
});

Promise的常见面试题

Promise是JavaScript面试中经常被问到的知识点，以下是一些常见的Promise面试题：

什么是Promise？
Promise有哪些特性？
Promise的用法是什么？
如何使用Promise来处理异步操作？
如何使用Promise来捕获错误？
Promise与Callback有什么区别？
Promise与Async/Await有什么区别？

手写Promise

如果你想更深入地理解Promise，你可以尝试自己手写一个Promise。这里有一个手写Promise的实现：

class Promise {
  constructor(executor) {
    this.state = "pending";
    this.value = undefined;
    this.reason = undefined;
    this.onFulfilledCallbacks = [];
    this.onRejectedCallbacks = [];

    const resolve = (value) => {
      if (this.state === "pending") {
        this.state = "fulfilled";
        this.value = value;
        this.onFulfilledCallbacks.forEach((callback) => {
          callback(value);
        });
      }
    };

    const reject = (reason) => {
      if (this.state === "pending") {
        this.state = "rejected";
        this.reason = reason;
        this.onRejectedCallbacks.forEach((callback) => {
          callback(reason);
        });
      }
    };

    try {
      executor(resolve, reject);
    } catch (error) {
      reject(error);
    }
  }

  then(onFulfilled, onRejected) {
    return new Promise((resolve, reject) => {
      if (this.state === "fulfilled") {
        setTimeout(() => {
          try {
            const result = onFulfilled(this.value);
            resolve(result);
          } catch (error) {
            reject(error);
          }
        }, 0);
      } else if (this.state === "rejected") {
        setTimeout(() => {
          try {
            const result = onRejected(this.reason);
            resolve(result);
          } catch (error) {
            reject(error);
          }
        }, 0);
      } else {
        this.onFulfilledCallbacks.push(() => {
          setTimeout(() => {
            try {
              const result = onFulfilled(this.value);
              resolve(result);
            } catch (error) {
              reject(error);
            }
          }, 0);
        });
        this.onRejectedCallbacks.push(() => {
          setTimeout(() => {
            try {
              const result = onRejected(this.reason);
              resolve(result);
            } catch (error) {
              reject(error);
            }
          }, 0);
        });
      }
    });
  }

  catch(onRejected) {
    return this.then(null, onRejected);
  }
}