揭秘Promise-then执行顺序的奥秘，彻底告别头秃！

2023-09-18 23:24:30

相信对于前端开发人员来说，Promise并不陌生，它是一种用于处理异步操作的强大工具，允许我们在一个异步操作完成时返回结果值，并支持链式的调用方式。然而，对于Promise中then方法的执行顺序，却常常让人头疼不已。本文将深入探究Promise-then的执行顺序，彻底揭开它的奥秘，帮助你告别头秃烦恼！

Promise简介

在开始讨论then方法的执行顺序之前，让我们先简单回顾一下Promise的基本概念。Promise是一个对象，它表示一个异步操作的最终完成（或失败）及其结果值。当异步操作完成时，Promise会通过resolve或reject方法来通知其调用者操作的结果。

then方法

then方法是Promise对象上的一个重要方法，它允许我们对异步操作的结果进行处理。then方法接受两个参数：一个用于处理成功结果的函数，另一个用于处理失败结果的函数。如果异步操作成功完成，则会调用第一个函数，并将结果值作为参数传递给该函数。如果异步操作失败，则会调用第二个函数，并将错误信息作为参数传递给该函数。

then方法的执行顺序

那么，then方法的执行顺序究竟是什么样的呢？简单来说，then方法的执行顺序遵循以下规则：

顺序执行： then方法是按照其被调用的顺序执行的。
异步执行： then方法中的处理函数是在异步操作完成后才执行的。
链式调用： then方法支持链式调用，即可以在一个then方法中调用另一个then方法。
错误处理： 如果异步操作失败，则会调用then方法中的失败处理函数。

不同的执行场景

为了更深入地理解then方法的执行顺序，让我们来看一些不同的执行场景：

场景1：单个then方法

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('成功结果');
  }, 1000);
});

promise.then((result) => {
  console.log(result); // 输出："成功结果"
});

在这个场景中，我们创建了一个Promise对象，并在1秒后使用resolve方法将其标记为完成状态。然后，我们调用then方法，并提供一个处理成功结果的函数。当Promise完成时，then方法的处理函数被调用，并在控制台中输出成功结果。

场景2：多个then方法

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('成功结果');
  }, 1000);
});

promise
  .then((result) => {
    console.log(result); // 输出："成功结果"
    return result + '附加值';
  })
  .then((result) => {
    console.log(result); // 输出："成功结果附加值"
  });

在这个场景中，我们在Promise完成时链式调用了两个then方法。第一个then方法处理成功结果，并返回一个附加值。第二个then方法接收第一个then方法返回的附加值，并在控制台中输出它。结果显示，then方法按照其被调用的顺序执行，并且可以链式调用。

场景3：错误处理

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(new Error('错误信息'));
  }, 1000);
});

promise
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.log(error.message); // 输出："错误信息"
  });