手写 Promise 并在项目实际应用-JavaScript中文网-JavaScript教程资源分享门户

Promise 是一种异步实现模式，它旨在解决 JavaScript 中异步编程的问题。在异步操作完成后，Promise 可以返回一个结果或一个错误，以便我们可以更好地处理异步操作的结果。

在本文中，我将介绍如何手写一个 Promise。这是一个实用项目，它将帮助你更好地了解并发现 Promise 的潜力，以及如何在实际项目中使用它。

Promise 的基础知识

首先，让我们看一下 Promise 的核心三个状态。

Pending：初始状态，既不是成功也不是失败。
Fulfilled（已完成）：意味着操作成功完成，Promise 返回了相应的结果。
Rejected（已拒绝）：意味着操作失败，Promise 返回了一个错误。

Promise 的状态可以随时改变。在某个时间点，一个 Promise 可能处于 Pending 状态，但在几秒钟后，它可能会变成 Fulfilled 状态，并返回一个成功的结果。

手写 Promise

接下来，我们将手写一个 Promise，具体步骤如下。

1. 构造函数

第一步是创建一个 Promise 构造函数。Promise 构造函数应该接收一个函数作为参数，该函数将接收两个参数：resolve 和 reject。

function MyPromise(fn) {
  // fn 是一个函数参数
  // 其中 fn 接收两个函数参数：resolve 和 reject
}

2. Promise 的状态和结果

现在，我们需要在 Promise 构造函数中定义 Promise 状态和结果。我们可以使用变量保存 Promise 的状态，并在 Promise 状态变化时更新状态。

// javascriptcn.com 代码示例
function MyPromise(fn) {
  let state = 'pending';
  let result = null;

  function resolve(data) {
    state = 'fulfilled';
    result = data;
  }

  function reject(error) {
    state = 'rejected';
    result = error;
  }

  fn(resolve, reject);
}

3. Promise 的 then 方法

接下来，我们需要编写一个 then 方法，以便在 Promise 完成操作后执行代码。then 方法应该接收两个函数参数：一个在 Promise 成功时执行，另一个在 Promise 失败时执行。

// javascriptcn.com 代码示例
function MyPromise(fn) {
  let state = 'pending';
  let result = null;
  let successCallback = null;
  let errorCallback = null;

  function resolve(data) {
    state = 'fulfilled';
    result = data;
    if (successCallback) {
      successCallback(result);
    }
  }

  function reject(error) {
    state = 'rejected';
    result = error;
    if (errorCallback) {
      errorCallback(result);
    }
  }

  function then(successFn, errorFn) {
    successCallback = successFn;
    errorCallback = errorFn;
  }

  fn(resolve, reject);
}

现在，我们已经编写了一个简单的 Promise。在下面的示例中，我们将演示如何在项目中使用 MyPromise：

// javascriptcn.com 代码示例
const myPromise = new MyPromise((resolve, reject) => {
  // 异步操作
  // 一段时间后执行回调
  if (成功) {
    resolve('成功消息');
  } else {
    reject('错误消息');
  }
});

myPromise.then((result) => {
  console.log(result); // 成功消息
}, (error) => {
  console.log(error); // 错误消息
});

在项目中应用 Promise

现在，我们已经了解了 Promise 的构造、API，并可以实现自己的 Promise。

在现代 Web 开发中，Promise 已成为处理异步操作的一种常见模式。我们可以在 HTTP 请求、表单提交、图像和其他资源加载以及大多数其他异步操作中使用 Promise。

下面是一个使用 Promise 处理 HTTP 请求的示例：

// javascriptcn.com 代码示例
function getData(url) {
  return new Promise((resolve, reject) => {
    // 创建 xhr 请求对象
    const xhr = new XMLHttpRequest();
    
    // 监听加载状态
    xhr.onreadystatechange = () => {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          resolve(xhr.responseText);
        } else {
          reject(xhr.statusText);
        }
      }
    };

    // 打开请求链接
    xhr.open('GET', url, true);

    // 发送请求
    xhr.send();
  });
}

// 使用 Promise 处理 HTTP 请求
getData('https://jsonplaceholder.typicode.com/todos/1')
  .then((result) => {
    console.log(result); // JSON 字符串
  }, (error) => {
    console.log(error); // 错误消息
  });

这只是 Promise 的一种用例。在 JavaScript 项目中，我们可以使用 Promise 处理任何异步操作。

总结

通过手写 Promise，并在项目中实际应用，我们更深入地理解了 Promise 模式及其适用场景。同时，也更好地学习了如何使用 Promise API 合理地控制异步流，并使代码更具可读性和可维护性。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654f20767d4982a6eb822a1a