深入理解 JavaScript 中的 Promise、async 和 await

知行小栈

已于 2024-05-12 00:07:12 修改

阅读量858

点赞数 22

分类专栏： JS 文章标签： javascript 开发语言 ecmascript

于 2024-05-11 23:53:10 首次发布

本文链接：https://blog.csdn.net/LearnerDL/article/details/138734006

版权

JS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

序言

在 JavaScript 中，异步编程是一项关键技能。为了更有效地处理异步任务，JavaScript 在其生命周期中引入了一系列功能。其中，Promise、async 和 await 是现代 JavaScript 中最重要的异步编程工具之一。本文将深入探讨这些概念，帮助大家更好地理解它们的作用和用法。

一、回调地狱

回调地狱（callback hell）是指在异步操作中过度嵌套回调函数，导致代码难以阅读和维护的情况。在过去，JavaScript 中处理异步操作通常使用回调函数。回调函数有一些缺点，比如难以管理，导致了回调地狱的问题，代码不易阅读和维护。

// 回调地狱示例中用到的 fetchData 函数的定义
const fetchData = (callback) => {
  setTimeout(() => {
    const success = Math.random() > 0.5; // 模拟操作成功或失败
    if (success) {
      callback('Data fetched successfully');
    } else {
      callback('Failed to fetch data');
    }
  }, Math.random() * 2000); // 模拟不同的执行时间
};

// 示例：回调地狱
fetchData((data) => {
  console.log(data); // 输出第一个异步操作的结果
  fetchData((data) => {
    console.log(data); // 输出第二个异步操作的结果
    fetchData((data) => {
      console.log(data); // 输出第三个异步操作的结果
      // 更多嵌套...
    }, (error) => {
      console.error(error); // 输出可能的错误信息
    });
  }, (error) => {
    console.error(error); // 输出可能的错误信息
  });
}, (error) => {
  console.error(error); // 输出可能的错误信息
});

二、Promise

Promise 是 JavaScript 中处理异步操作的一种强大机制。它允许处理尚未完成的操作，并在操作完成或失败时执行相应的操作。通过 Promise，可以更清晰地表达异步操作的流程，避免了传统的回调地狱问题。

Promise 是一个对象，代表了尚未完成但预计会在未来完成的操作。Promise 可以有三种状态：

Pending（进行中）：初始状态，表示操作尚未完成，也没有失败。
Fulfilled（已成功）：表示操作已经成功完成。
Rejected（已失败）：表示操作失败。

Promise 可以通过 then() 方法来处理成功的结果，通过 catch() 方法来处理失败的结果。这使得异步操作的处理更加清晰和可控。

// 使用 Promise 定义 fetchData 函数
const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = Math.random() > 0.5; // 模拟操作成功或失败
      if (success) {
        resolve('Data fetched successfully');
      } else {
        reject('Failed to fetch data');
      }
    }, Math.random() * 2000); // 模拟不同的执行时间
  });
};

// 示例：使用 Promise 处理异步操作
fetchData()
  .then((data) => {
    console.log(data); // 输出 'Data fetched successfully'
  })
  .catch((error) => {
    console.error(error); // 输出 'Failed to fetch data'
  });

三、Promise 嵌套的 Promise 链

有时候，我们需要依次执行多个异步操作，其中的每个操作依赖于前一个操作的结果。在这种情况下，可以使用 Promise 嵌套的 Promise 链。

// 示例：Promise 嵌套的 Promise 链
const fetchFirstData = () => {
  return new Promise((resolve, reject) => {
    // 模拟异步操作，2秒后返回结果
    setTimeout(() => {
      const success = Math.random() > 0.5; // 模拟操作成功或失败
      if (success) {
        resolve('First data fetched successfully');
      } else {
        reject('Failed to fetch first data');
      }
    }, 2000);
  });
};

const fetchSecondData = () => {
  return new Promise((resolve, reject) => {
    // 模拟异步操作，2秒后返回结果
    setTimeout(() => {
      const success = Math.random() > 0.5; // 模拟操作成功或失败
      if (success) {
        resolve('Second data fetched successfully');
      } else {
        reject('Failed to fetch second data');
      }
    }, 2000);
  });
};

fetchFirstData()
  .then((firstData) => {
    // 输出第一个异步操作的结果
    console.log(firstData); // 输出 'First data fetched successfully'
    // 返回第二个异步操作的 Promise 对象
    return fetchSecondData()
      .then((secondData) => {
        // 输出第二个异步操作的结果
        console.log(secondData); // 输出 'Second data fetched successfully'
      })
      .catch((error) => {
        // 输出第二个异步操作可能的错误信息
        console.error(error); // 输出可能的错误信息
      });
  })
  .catch((error) => {
    // 输出第一个异步操作可能的错误信息
    console.error(error); // 输出可能的错误信息
  });

四、async 和 await

尽管 Promise 解决了回调地狱的问题，但在处理多个异步操作时，可能会导致深层嵌套的 Promise 链，使得代码难以理解。为了解决这个问题，ECMAScript 2017 引入了 async 和 await。它们让异步代码更像同步代码，使得代码更加清晰和易于理解。

// 示例：使用 async 和 await 处理异步操作
const fetchFirstData = () => {
  return new Promise((resolve, reject) => {
    // 模拟异步操作，2秒后返回结果
    setTimeout(() => {
      const success = Math.random() > 0.5; // 模拟操作成功或失败
      if (success) {
        resolve('First data fetched successfully');
      } else {
        reject('Failed to fetch first data');
      }
    }, 2000);
  });
};

const fetchSecondData = () => {
  return new Promise((resolve, reject) => {
    // 模拟异步操作，2秒后返回结果
    setTimeout(() => {
      const success = Math.random() > 0.5; // 模拟操作成功或失败
      if (success) {
        resolve('Second data fetched successfully');
      } else {
        reject('Failed to fetch second data');
      }
    }, 2000);
  });
};

const fetchDataAsync = async () => {
  try {
    // 使用 await 等待第一个异步操作的结果
    const firstData = await fetchFirstData();
    // 输出第一个异步操作的结果
    console.log(firstData); // 输出 'First data fetched successfully'
    
    // 使用 await 等待第二个异步操作的结果
    const secondData = await fetchSecondData();
    // 输出第二个异步操作的结果
    console.log(secondData); // 输出 'Second data fetched successfully'
  } catch (error) {
    // 输出可能的错误信息
    console.error(error);
  }
};

// 调用包含异步操作的函数
fetchDataAsync();