JavaScript 代码提升进阶攻略：手把手教你从新手到高手

2023-01-10 17:03:29

手写 Promise：通往 JavaScript 异步编程的必由之路

掌握异步编程，踏上 JavaScript 进阶之路

在 JavaScript 的世界中，异步编程是驾驭其强大功能的关键。它使你的代码能够在不阻塞主线程的情况下运行，从而构建出响应迅速、高效的应用程序。而 Promise，则是处理异步操作的利器，它可以让你的代码更具结构化、可读性更强。

了解 JavaScript 异步编程的基础

在深入 Promise 之前，让我们先回顾一下 JavaScript 异步编程的基础。异步编程是一种机制，允许你的代码在不等待异步操作完成的情况下继续执行。JavaScript 中有两种主要的方式来实现异步编程：回调函数和 Promise。

回调函数

回调函数是处理异步操作最传统的方式。当异步操作完成后，它将被调用。

function doSomethingAsync(callback) {
  setTimeout(function() {
    callback();
  }, 1000);
}

doSomethingAsync(function() {
  console.log("I'm done!");
});

Promise

Promise 是一个对象，它表示异步操作的结果。与回调函数相比，它提供了更优雅、更易读的语法来处理异步操作。

const promise = new Promise(function(resolve, reject) {
  setTimeout(function() {
    resolve("I'm done!");
  }, 1000);
});

promise.then(function(result) {
  console.log(result);
});

Promise 的优势在于它支持链式调用，这使得处理多个异步操作变得更加容易。

手把手教你手写 Promise

现在，让我们亲自动手实现一个 Promise。创建一个 Promise 对象需要传入一个函数作为参数，该函数有两个参数：resolve 和 reject。resolve 用于在异步操作成功时调用，而 reject 用于在操作失败时调用。

function myPromise(executor) {
  let state = "pending";
  let result;

  function resolve(value) {
    if (state !== "pending") {
      return;
    }

    state = "resolved";
    result = value;

    callbacks.forEach(function(callback) {
      callback(result);
    });
  }

  function reject(error) {
    if (state !== "pending") {
      return;
    }

    state = "rejected";
    result = error;

    callbacks.forEach(function(callback) {
      callback(result);
    });
  }

  const callbacks = [];

  executor(resolve, reject);

  return {
    then: function(onFulfilled, onRejected) {
      return new myPromise(function(resolve, reject) {
        callbacks.push(function(result) {
          if (state === "resolved") {
            let value = onFulfilled(result);
            resolve(value);
          } else if (state === "rejected") {
            let error = onRejected(result);
            reject(error);
          }
        });
      });
    },
    catch: function(onRejected) {
      return this.then(null, onRejected);
    }
  };
}