理解 JavaScript 中的 Promise 与 Callback

认证测试的关键问题和解答

1. 什么是回调函数，它与常规函数有何不同？

   • 回调函数作为参数传递给另一个函数并被调用以处理异步操作。与常规函数不同，回调被设计为在完成某个任务后执行。

2. 与回调相比，Promise 如何提高代码可读性并管理异步操作？

   • Promise 允许链接和更好的错误处理，从而产生更具可读性和可维护性的代码。它们有助于避免被称为“回调地狱”的深层嵌套结构。

3. Promise 的主要状态是什么，它们如何在这些状态之间转换？

   • 主要状态有：Pending（初始状态）、Fulfilled（操作成功完成）、Rejected（操作失败）。 Promise 从 Pending 转换为 Fulfilled 或 Rejected。

4. 如何使用 Promises 处理错误，这与使用回调的错误处理相比如何？

   • Promises 提供了一个 catch 方法来以简化的方式处理错误，而使用回调进行错误处理通常需要传递错误对象并在嵌套回调中进行多次检查。

5. Promise.all 和 Promise.race 有什么区别，什么时候使用它们？

   • Promise.all 在所有输入 Promise 解析时解析，这使得它对于等待多个异步操作完成非常有用。一旦其中一个输入 Promise 解析，Promise.race 就会解析，这对于需要第一个完成的操作结果的场景很有用。

6. async/await 语法如何简化 Promises 的使用，以及使用 wait 的规则是什么？

   • async/await 语法允许以同步方式编写异步代码，提高可读性。 wait 只能在异步函数内部使用，并暂停执行直到 Promise 解析。

介绍

在 JavaScript 不断发展的环境中，有效管理异步操作是构建高性能 Web 应用程序的关键。虽然回调是最初的方法，但 Promises 引入了一种更加结构化和可读的方法来处理异步任务。本博客深入探讨了使用 Promise 与回调的复杂性，假设您已经对这些概念有基本的了解。

Promise 相对于回调的好处

提高可读性和可维护性

回调虽然有效，但通常会导致称为“回调地狱”的深层嵌套结构，使代码难以阅读和维护。

回调地狱的例子：

fetchData(function(response1) {
  fetchMoreData(response1, function(response2) {
    fetchEvenMoreData(response2, function(response3) {
      console.log(response3);
    });
  });
});

通过 Promise 进行改进：

fetchData()
  .then(response1 => fetchMoreData(response1))
  .then(response2 => fetchEvenMoreData(response2))
  .then(response3 => console.log(response3))
  .catch(error => console.error(error));

错误处理

使用回调，错误处理可能会变得很麻烦，因为您需要传递错误对象并在每个级别处理它们。

使用回调处理错误：

function fetchData(callback) {
  setTimeout(() => {
    if (/* error condition */) {
      callback(new Error('An error occurred'), null);
    } else {
      callback(null, 'data');
    }
  }, 1000);
}

fetchData((error, data) => {
  if (error) {
    console.error(error);
  } else {
    console.log(data);
  }
});

使用 Promise 进行错误处理：

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (/* error condition */) {
        reject(new Error('An error occurred'));
      } else {
        resolve('data');
      }
    }, 1000);
  });
}

fetchData()
  .then(data => console.log(data))
  .catch(error => console.error(error));

高级 Promise 方法

Promise.all

当您需要等待多个异步操作完成后再继续操作时，Promise.all 非常有用。

例子：

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then(values => {
  console.log(values); // [3, 42, "foo"]
});

Promise.race

当您需要最快操作的结果时，Promise.race 很有用。

例子：

const promise1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 500, 'one');
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'two');
});

Promise.race([promise1, promise2]).then(value => {
  console.log(value); // "two"
});

使用 async/await 简化异步代码

async/await 语法允许您编写看起来同步的异步代码，增强可读性并降低链接 Promise 的复杂性。

例子：

async function fetchData() {
  return 'data';
}

async function processData() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

processData();

结论

虽然回调为 JavaScript 中处理异步操作奠定了基础，但 Promise 显着提高了异步代码的可读性、可维护性和错误处理能力。了解如何以及何时有效地使用这些工具对于现代 JavaScript 开发至关重要。借助 Promises 和 async/await 语法，开发人员可以编写更清晰、更易于管理的代码，为更强大的应用程序铺平道路。