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

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

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

为什么需要学习异步 javascript

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

什么是异步模式?

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

什么是回调?

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

回调如何工作:

  1. 您定义一个函数(回调)。
  2. 您将此函数作为参数传递给另一个函数。
  3. 接收函数在适当的时间执行回调。

示例 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);
      });
    });
  });
});

回调地狱问题:

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

使用回调处理错误

使用回调时,通常使用称为错误优先回调的模式。在此模式中,回调函数将错误作为其第一个参数。如果没有错误,第一个参数通常为 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 是表示异步操作最终完成(或失败)及其结果值的对象。与回调相比,它们提供了一种更简洁的方式来处理异步代码。

承诺的目的:

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

承诺国家

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

  1. pending: promise 被解决或拒绝之前的初始状态。
  2. fulfilled: 操作成功完成并且已调用resolve 时的状态。
  3. 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);
  });

链接承诺

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

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

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 中的异步操作。

异步/等待简介

asyncawaitjavascript 中引入的关键字,旨在使处理异步代码更具可读性且更易于使用。

  • 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();

最佳实践:

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

结论

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

以上就是掌握 JavaScript 异步模式:从回调到异步/等待的详细内容,更多请关注www.sxiaw.com其它相关文章!