JavaScript 中异步操作Promise: 从基础到实践的深入探究

JavaScript 中，异步操作是经常用到的操作，比如 Ajax 请求、读取文件等等。但是，由于单线程的限制以及 JS 的事件循环机制，这些异步操作可能会带来一些问题。比如，当有多个异步操作需要顺序执行时，代码变得非常难以维护。为了解决这些问题，Promise 应运而生。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/46871.html

Promise 是 JavaScript 中的一个重要概念，也是现代 JavaScript 开发中必不可少的一部分。本文将从 Promise 的基础开始，逐步深入，介绍 Promise 的实现原理、使用方法及常见应用场景。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/46871.html

Promise 的基础

Promise 简介

Promise 是 ES6 中新增的语法特性，它是一种异步编程的解决方案。Promise 可以让我们优雅地处理异步逻辑，避免回调地狱（Callback Hell）的出现，提高代码的可读性和可维护性。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/46871.html

简单来说，Promise 就是对异步操作结果的占位符，它可以表示一个异步操作的最终完成或失败，并返回其结果或错误信息。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/46871.html

Promise 的状态

Promise 有三种状态：pending、fulfilled 和 rejected。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/46871.html

• pending：初始状态，既不是成功，也不是失败状态。
• fulfilled：意味着操作成功完成。
• rejected：意味着操作失败。

当 Promise 的状态从 pending 转换为 fulfilled 或 rejected 时，Promise 将永远保持这个状态，并且不能再次转换。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/46871.html

Promise 的基本用法

要创建一个 Promise 实例，需要实例化 Promise 构造函数，其中传入一个函数作为参数。这个函数又称为 executor 函数，它接收两个参数：resolve 和 reject。我们可以在这个函数中进行异步操作，并调用 resolve 或 reject 函数来返回异步操作的结果和错误信息。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/46871.html

下面是一个简单的 Promise 示例：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/46871.html

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Hello, Promise!');
  }, 1000);
});

promise.then(result => {
  console.log(result); // 输出 "Hello, Promise!"
});

上述代码中，我们创建了一个 Promise 实例，并在其 executor 函数中使用 setTimeout 模拟一个异步操作。1 秒后，我们调用了 resolve 函数并传入一个字符串值，表示异步操作成功完成。然后，我们调用了 promise.then 方法，传入一个回调函数，用于处理 Promise 的完成结果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/46871.html

Promise 的实现原理

Promise 的内部结构

Promise 内部有三个重要的属性：状态（state）、值（value）和队列（callbacks）。状态和值都是只读的，而队列是一个数组，用于存储 then 方法注册的回调函数。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/46871.html

当 Promise 被创建时，它的状态为 pending。随后，当调用 resolve 函数时，Promise 的状态会变为 fulfilled，同时存储返回的值。如果调用 reject 函数，则状态会变为 rejected，同时存储错误信息。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/46871.html

当 Promise 状态发生变化时，它会依次执行所有注册的回调函数，这些回调函数都被存储在队列中。如果当前状态为 fulfilled，则会执行 then 方法注册的回调函数；如果当前状态为 rejected，则会执行 catch 方法注册的回调函数。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/46871.html

Promise 的链式调用

Promise 内部还有一种特殊的方法：then。通过 then 方法，我们可以链式调用多个 Promise 实例，并将它们串起来执行。当一个 Promise 完成后，它会返回一个新的 Promise 实例，以及下一个要执行的函数。如果该函数返回了一个普通值或者一个 Promise 实例，则会继续执行下一个链式调用；如果返回了一个错误信息，则会跳转到 catch 方法并执行相应的错误处理逻辑。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/46871.html

下面是一个 Promise 链式调用的示例：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/46871.html

const getUser = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ name: 'Tom', age: 18 });
    }, 1000);
  });
};

const login = user => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (user.name === 'Tom' && user.age >= 18) {
        resolve('Login success!');
      } else {
        reject('Login failed!');
      }
    }, 1000);
  });
};

getUser()
  .then(user => {
    console.log(user); // 输出 { name: 'Tom', age: 18 }
    return login(user);
  })
  .then(result => {
    console.log(result); // 输出 "Login success!"
  })
  .catch(error => {
    console.log(error); // 输出 "Login failed!"
  });

上述代码中，我们先定义了两个异步函数 getUser 和 login，分别用于获取用户信息和检查登录状态。然后，我们使用 Promise 链式调用将它们串起来。在第一个 then 方法中，我们获取到了用户信息，并将其传递给 login 函数进行登录验证。如果登录成功，则会返回一个字符串值；否则，会返回一个错误信息。最后，我们使用 catch 方法来处理所有可能的错误。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/46871.html

Promise 的实现细节

虽然 Promise 看似简单，但是其中有很多实现细节需要注意。下面我们来逐一介绍。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/46871.html

Promise 对象的 then 方法

Promise 对象的 then 方法接收两个参数：onFulfilled 和 onRejected。这两个参数都是可选的，如果不传入，则会直接将前一个 Promise 的结果传递给下一个 Promise。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/46871.html

const promise1 = new Promise((resolve, reject) => {
  resolve('Promise 1');
});

const promise2 = promise1.then();

promise2.then(result => {
  console.log(result); // 输出 "Promise 1"
});

上述代码中，我们定义了一个 Promise 实例 promise1，并且在其 executor 函数中调用了 resolve 函数来返回一个字符串值。然后，我们使用 promise1.then 方法获取到了一个新的 Promise 实例 promise2，但是我们并没有传递任何回调函数给它。最后，我们又使用 promise2.then 方法来获取到了 promise1 的结果，并输出了该结果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/46871.html

then 方法的链式调用

Promise 的 then 方法支持链式调用，每次调用 then 方法时都会返回一个新的 Promise 实例。因此，我们可以通过多次调用 then 方法来链式调用多个异步操作。在链式调用过程中，如果某个 then 方法返回了一个普通值或者一个 Promise 实例，则会继续执行下一个链式调用；如果返回了一个错误信息，则会跳转到 catch 方法并执行相应的错误处理逻辑。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/46871.html

const promise = new Promise((resolve, reject) => {
  resolve(1);
});

promise
  .then(result => {
    console.log(result); // 输出 1
    return 2;
  })
  .then(result => {
    console.log(result); // 输出 2
    throw new Error('Something went wrong!');
  })
  .catch(error => {
    console.log(error); // 输出 "Something went wrong!"
  });

上述代码中，我们定义了一个 Promise 实例 promise，然后通过 then 方法进行链式调用。在第一个 then 方法中，我们返回了一个数字 2，表示下一步要执行的操作。在第二个 then 方法中，我们抛出了一个错误，并将其传递给 catch 方法处理。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/46871.html

then 方法的异步执行

Promise 的 then 方法中注册的回调函数是异步执行的，这意味着它们会在当前事件循环结束后执行。因此，如果需要在 then 方法中使用前一个 Promise 的结果，需要在该方法中返回一个新的 Promise 实例，并将结果传递给该实例的 resolve 函数。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/46871.html

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(1);
  }, 1000);
});

promise.then(result => {
  console.log(result); // 输出 1
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(2);
    }, 1000);
  });
})
.then(result => {
  console.log(result); // 输出 2
});

上述代码中，我们定义了一个异步操作，然后使用 then 方法注册了一个回调函数。在该回调函数中，我们返回了一个新的 Promise 实例，并在其中进行了另一个异步操作。最后，我们再次使用 then 方法来获取到上一步操作的结果，并输出它。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/46871.html

catch 方法的错误处理

Promise 的 catch 方法是用于处理 Promise 中抛出的错误信息的。如果 Promise 中发生了错误，则会跳转到 catch 方法，并执行相应的错误处理逻辑。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/46871.html

const promise = new Promise((resolve, reject) => {
  throw new Error('Something went wrong!');
});

promise.catch(error => {
  console.log(error); // 输出 "Something went wrong!"
});

上述代码中，我们定义了一个 Promise 实例，并在其 executor 函数中抛出了一个错误。然后，我们使用 catch 方法来捕获这个错误，并输出相应的错误信息。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/46871.html

Promise 的常见应用场景

Ajax 请求

在网页开发中，Ajax 请求是非常常见的一种异步操作。通过 Promise，我们可以轻松地管理 Ajax 请求的结果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/46871.html

const ajax = url => {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onreadystatechange = () => {
      if (xhr.readyState === 4 && xhr.status === 200) {
        resolve(xhr.responseText);
      } else if (xhr.readyState === 4 && xhr.status !== 200) {
        reject(xhr.statusText);
      }
    };
    xhr.send();
  });
};

ajax('http://example.com/api')
  .then(result => {
    console.log(result);
  })
  .catch(error => {
    console.log(error);
  });

上述代码中，我们封装了一个 ajax 方法，用于发送 Ajax 请求并返回一个 Promise 实例。在 then 方法中，我们处理了请求成功的结果；在 catch 方法中，我们处理了请求失败的错误信息。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/46871.html

定时器

Promise 还可以用于管理定时器操作。通过 Promise，我们可以轻松地控制定时器的延时和循环次数。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/46871.html

const delay = ms => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve();
    }, ms);
  });
};

delay(1000)
  .then(() => {
    console.log('Hello, Promise!');
    return delay(1000);
  })
  .then(() => {
    console.log('Hello, Promise again!');
    return delay(1000);
  })
  .then(() => {
    console.log('Goodbye, Promise!');
  });

上述代码中，我们定义了一个 delay 方法，用于延迟一段时间并返回一个 Promise 实例。然后，我们使用 Promise 链式调用来控制定时器的执行次数和延时。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/46871.html

总结

本文从 Promise 的基础开始，逐步深入，介绍了 Promise 的实现原理、使用方法及常见应用场景。Promise 是 JavaScript 中非常重要的异步编程解决方案，掌握 Promise 的使用方法和实现原理，可以帮助我们更优雅、高效地处理异步逻辑。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/46871.html