Promise/Async/Await进阶指南：33个代码输出题帮你一飞冲天

前言

异步编程是现代Web开发中不可或缺的一部分，而JavaScript中Promise、Async和Await这三剑客则是异步编程的强大工具。本文精心挑选了33道代码输出题，涵盖从基础到进阶的各种场景，旨在帮助你彻底掌握这三者的使用技巧。同时，我们还提供了手撕Promise的全部代码实现和3道常见的基础应用题，助你一飞冲天。

Promise

1. Promise的基本使用

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

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

2. Promise的链式调用

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

promise
  .then((value) => {
    console.log(value); // 输出: Hello, Promise!
    return value + ' Again';
  })
  .then((newValue) => {
    console.log(newValue); // 输出: Hello, Promise! Again
  });

3. Promise的错误处理

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(new Error('Oops, something went wrong!'));
  }, 1000);
});

promise
  .then((value) => {
    console.log(value); // 不会被调用
  })
  .catch((error) => {
    console.log(error.message); // 输出: Oops, something went wrong!
  });

Async/Await

4. Async函数的基本使用

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

  const value = await promise;
  console.log(value); // 输出: Hello, Async!
}

greet();

5. Async函数的链式调用

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

  const value = await promise;
  console.log(value); // 输出: Hello, Async!

  return value + ' Again';
}

async function greetAgain() {
  const newValue = await greet();
  console.log(newValue); // 输出: Hello, Async! Again
}

greetAgain();

6. Async函数的错误处理

async function greet() {
  const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
      reject(new Error('Oops, something went wrong!'));
    }, 1000);
  });

  try {
    const value = await promise;
    console.log(value); // 不会被调用
  } catch (error) {
    console.log(error.message); // 输出: Oops, something went wrong!
  }
}

greet();

手撕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') return;
      this.state = 'fulfilled';
      this.value = value;
      this.onFulfilledCallbacks.forEach((callback) => {
        callback(value);
      });
    };

    const reject = (reason) => {
      if (this.state !== 'pending') return;
      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 value = onFulfilled(this.value);
            resolve(value);
          } catch (error) {
            reject(error);
          }
        }, 0);
      } else if (this.state === 'rejected') {
        setTimeout(() => {
          try {
            const reason = onRejected(this.reason);
            resolve(reason);
          } catch (error) {
            reject(error);