掌握 JavaScript 异步模式：从回调到异步/等待

掌握 javascript 异步模式：从回调到异步/等待

当我第一次遇到异步 javascript 时，我在回调方面遇到了困难，并且不知道 promises 在幕后是如何工作的。随着时间的推移，对 promise 和 async/await 的了解改变了我的编码方法，使其更易于管理。在本博客中，我们将逐步探索这些异步模式，揭示它们如何简化您的开发流程并使您的代码更干净、更高效。让我们一起深入探讨并揭开这些概念！

为什么需要学习异步 javascript？

学习异步 javascript 对于现代 web 开发至关重要。它允许您有效地处理 api 请求等任务，使您的应用程序保持快速响应。掌握异步技术（例如 promises 和 async/await）不仅对于构建可扩展的应用程序至关重要，而且对于在 javascript 工作面试中取得成功也至关重要，理解这些概念通常是重点。通过掌握异步 javascript，您将提高编码技能并更好地为现实世界的挑战做好准备。

什么是异步模式？

javascript 中的异步模式是用于处理需要时间的任务的技术，例如从服务器获取数据，而不冻结应用程序。最初，开发人员使用回调来管理这些任务，但这种方法通常会导致代码复杂且难以阅读，称为“回调地狱”。为了简化这一点，引入了 promise，通过链接操作和更优雅地处理错误，提供了一种更干净的方式来处理异步操作。 async/await 继续发展，它允许您编写看起来和行为更像同步代码的异步代码，从而更易于阅读和维护。这些模式对于构建高效、响应式的应用程序至关重要，也是现代 javascript 开发的基础。我们将在本博客中更详细地探讨这些概念。

什么是回调？

回调是作为参数传递给其他函数的函数，目的是让接收函数在某个时刻执行回调。这对于您希望确保某些代码在特定任务完成后运行的场景非常有用，例如从服务器获取数据或完成计算后。

回调如何工作：

您定义一个函数（回调）。
您将此函数作为参数传递给另一个函数。
接收函数在适当的时间执行回调。

示例 1

function fetchdata(callback) {
  // simulate fetching data with a delay
  settimeout(() => {
    const data = "data fetched";
    callback(data); // call the callback function with the fetched data
  }, 1000);
}

function processdata(data) {
  console.log("processing:", data);
}

fetchdata(processdata); // fetchdata will call processdata with the data

示例 2

// function that adds two numbers and uses a callback to return the result
function addnumbers(a, b, callback) {
  const result = a + b;
  callback(result); // call the callback function with the result
}

// callback function to handle the result
function displayresult(result) {
  console.log("the result is:", result);
}

// call addnumbers with the displayresult callback
addnumbers(5, 3, displayresult);

注意：我认为回调对于处理异步操作是有效的，但要小心：随着代码复杂性的增加，尤其是嵌套回调，您可能会遇到称为回调地狱的问题。当回调彼此深度嵌套时，就会出现此问题，从而导致可读性问题并使代码难以维护。

回调地狱

回调地狱（也称为末日金字塔）指的是有多个嵌套回调的情况。当您需要按顺序执行多个异步操作，并且每个操作都依赖于前一个操作时，就会发生这种情况。

例如。这会创建一个难以阅读和维护的“金字塔”结构。

fetchdata(function(data1) {
  processdata1(data1, function(result1) {
    processdata2(result1, function(result2) {
      processdata3(result2, function(result3) {
        console.log("final result:", result3);
      });
    });
  });
});

回调地狱问题：

可读性：代码变得难以阅读和理解。
可维护性：进行更改或调试变得具有挑战性。
错误处理：管理错误可能会变得复杂。

使用回调处理错误

使用回调时，通常使用称为错误优先回调的模式。在此模式中，回调函数将错误作为其第一个参数。如果没有错误，第一个参数通常为 null 或未定义，实际结果作为第二个参数提供。

function fetchdata(callback) {
  settimeout(() => {
    const error = null; // or `new error("some error occurred")` if there's an error
    const data = "data fetched";
    callback(error, data); // pass error and data to the callback
  }, 1000);
}

function processdata(error, data) {
  if (error) {
    console.error("error:", error);
    return;
  }
  console.log("processing:", data);
}

fetchdata(processdata); // `processdata` will handle both error and data

注意：在回调之后，引入了 promise 来处理 javascript 中的异步过程。我们现在将更深入地研究 promise 并探索它们在幕后是如何工作的。

promise 简介

promises 是表示异步操作最终完成（或失败）及其结果值的对象。与回调相比，它们提供了一种更简洁的方式来处理异步代码。

承诺的目的：

避免回调地狱： promise 有助于管理多个异步操作，无需深层嵌套。
提高可读性： promise 提供了一种更具可读性的方式来处理异步任务序列。

承诺国家

promise 可以处于以下三种状态之一：

pending： promise 被解决或拒绝之前的初始状态。
fulfilled： 操作成功完成并且已调用resolve 时的状态。
rejected： 操作失败时的状态，并且已调用reject。

注意：如果您想探索更多内容，您应该查看了解 promise 如何在幕后工作，其中我讨论了 promise 如何在幕后工作。

示例 1

// creating a new promise
const mypromise = new promise((resolve, reject) => {
  const success = true; // simulate success or failure
  if (success) {
    resolve("operation successful!"); // if successful, call resolve
  } else {
    reject("operation failed!"); // if failed, call reject
  }
});

// using the promise
mypromise
  .then((message) => {
    console.log(message); // handle the successful case
  })
  .catch((error) => {
    console.error(error); // handle the error case
  });

示例 2

const examplepromise = new promise((resolve, reject) => {
  settimeout(() => {
    const success = math.random() > 0.5; // randomly succeed or fail
    if (success) {
      resolve("success!");
    } else {
      reject("failure.");
    }
  }, 1000);
});

console.log("promise state: pending...");

// to check the state, you would use `.then()` or `.catch()`
examplepromise
  .then((message) => {
    console.log("promise state: fulfilled");
    console.log(message);
  })
  .catch((error) => {
    console.log("promise state: rejected");
    console.error(error);
  });

链接承诺

链接允许您按顺序执行多个异步操作，每一步都取决于前一步的结果。

链式 promise 是 javascript 的一项强大功能，它允许您执行一系列异步操作，其中每一步都取决于前一步的结果。与深层嵌套的回调相比，这种方法更干净、更具可读性。

promise 链如何工作

promise 链 涉及按顺序连接多个 promise。链中的每个 promise 仅在前一个 promise 解决后才会执行，并且每个 promise 的结果都可以传递到链中的下一步。

function step1() {
  return new promise((resolve) => {
    settimeout(() => resolve("step 1 completed"), 1000);
  });
}

function step2(message) {
  return new promise((resolve) => {
    settimeout(() => resolve(message + " -> step 2 completed"), 1000);
  });
}

function step3(message) {
  return new promise((resolve) => {
    settimeout(() => resolve(message + " -> step 3 completed"), 1000);
  });
}

// chaining the promises
step1()
  .then(result => step2(result))
  .then(result => step3(result))
  .then(finalresult => console.log(finalresult))
  .catch(error => console.error("error:", error));

链接的缺点：
虽然与嵌套回调相比，链接 promise 提高了可读性，但如果链变得太长或太复杂，它仍然会变得笨拙。这可能会导致类似于回调地狱中出现的可读性问题。

注意：为了解决这些挑战，引入了 async 和 wait 来提供一种更易读、更简单的方法来处理 javascript 中的异步操作。

异步/等待简介

async 和 await 是 javascript 中引入的关键字，旨在使处理异步代码更具可读性且更易于使用。

async：将函数标记为异步。异步函数总是返回一个承诺，并且它允许在其中使用等待。
await：暂停异步函数的执行，直到承诺解决，从而更容易以类似同步的方式处理异步结果。

async function fetchdata() {
  return new promise((resolve) => {
    settimeout(() => {
      resolve("data fetched");
    }, 1000);
  });
}

async function getdata() {
  const data = await fetchdata(); // wait for fetchdata to resolve
  console.log(data); // logs "data fetched"
}

getdata();

异步/等待如何工作

1。异步函数始终返回 promise：

无论你从异步函数返回什么，它总是会被包装在一个承诺中。例如：

async function example() {
  return "hello";
}

example().then(console.log); // logs "hello"

即使 example() 返回一个字符串，它也会自动包装在一个 promise 中。

2。等待暂停执行：

await 关键字暂停异步函数的执行，直到它等待的 promise 解析。

async function example() {
  console.log("start");
  const result = await new promise((resolve) => {
    settimeout(() => {
      resolve("done");
    }, 1000);
  });
  console.log(result); // logs "done" after 1 second
}

example();

在此示例中：

“开始”立即被记录。
await 暂停执行，直到 promise 在 1 秒后解决。
承诺解决后会记录“完成”。

使用 async/await 进行错误处理

使用 async/await 处理错误是使用 try/catch 块完成的，这使得错误处理比 promise 链更加直观。

async function fetchdata() {
  throw new error("something went wrong!");
}

async function getdata() {
  try {
    const data = await fetchdata();
    console.log(data);
  } catch (error) {
    console.error("error:", error.message); // logs "error: something went wrong!"
  }
}

getdata();

使用 promises，您可以使用 .catch() 处理错误：

fetchdata()
  .then(data => console.log(data))
  .catch(error => console.error("error:", error.message));

将 async/await 与 try/catch 结合使用通常会产生更干净、更易读的代码。

将 async/await 与 promise 结合起来

您可以将 async/await 与现有的基于 promise 的函数无缝结合使用。

示例

function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("Data fetched");
    }, 1000);
  });
}

async function getData() {
  const data = await fetchData(); // Wait for the promise to resolve
  console.log(data); // Logs "Data fetched"
}

getData();

最佳实践：

使用 async/await 来提高可读性：在处理多个异步操作时，async/await 可以让代码更加线性，更容易理解。
与 promise 结合：继续使用 async/await 和基于 promise 的函数来更自然地处理复杂的异步流程。
错误处理： 始终在异步函数中使用 try/catch 块来处理潜在的错误。

结论

与传统的 promise 链和回调相比，async 和 wait 提供了一种更清晰、更易读的方式来处理异步操作。通过允许您编写外观和行为类似于同步代码的异步代码，它们可以简化复杂的逻辑并使用 try/catch 块改进错误处理。将 async/await 与 promise 一起使用会产生更易于维护和理解的代码。

以上就是掌握 JavaScript 异步模式：从回调到异步/等待的详细内容，更多请关注其它相关文章！