当我第一次遇到异步 javascript 时，我在回调方面遇到了困难，并且不知道 promises 在幕后是如何工作的。随着时间的推移，对 promise 和 async/await 的了解改变了我的编码方法，使其更易于管理。在本博客中，我们将逐步探索这些异步模式，揭示它们如何简化您的开发流程并使您的代码更干净、更高效。让我们一起深入探讨并揭开这些概念！
为什么需要学习异步 javascript？
学习异步 javascript 对于现代 web 开发至关重要。它允许您有效地处理 api 请求等任务，使您的应用程序保持快速响应。掌握异步技术（例如 promises 和 async/await）不仅对于构建可扩展的应用程序至关重要，而且对于在 javascript 工作面试中取得成功也至关重要，理解这些概念通常是重点。通过掌握异步 javascript，您将提高编码技能并更好地为现实世界的挑战做好准备。
什么是异步模式？
javascript 中的异步模式是用于处理需要时间的任务的技术，例如从服务器获取数据，而不冻结应用程序。最初，开发人员使用回调来管理这些任务，但这种方法通常会导致代码复杂且难以阅读，称为“回调地狱”。为了简化这一点，引入了 promise，通过链接操作和更优雅地处理错误，提供了一种更干净的方式来处理异步操作。 async/await 继续发展，它允许您编写看起来和行为更像同步代码的异步代码，从而更易于阅读和维护。这些模式对于构建高效、响应式的应用程序至关重要，也是现代 javascript 开发的基础。我们将在本博客中更详细地探讨这些概念。
什么是回调？
回调 是作为参数传递给其他函数的函数，目的是让接收函数在某个时刻执行回调。这对于您希望确保某些代码在特定任务完成后运行的场景非常有用，例如从服务器获取数据或完成计算后。
回调如何工作：
立即学习“Java免费学习笔记（深入）”；
您定义一个函数（回调）。您将此函数作为参数传递给另一个函数。接收函数在适当的时间执行回调。
示例 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 resultfunction addnumbers(a, b, callback) { const result = a + b; callback(result); // call the callback function with the result}// callback function to handle the resultfunction displayresult(result) { console.log("the result is:", result);}// call addnumbers with the displayresult callbackaddnumbers(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 promiseconst 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 promisemypromise .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 promisesstep1() .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 异步模式：从回调到异步/等待的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1491400.html
微信扫一扫 
支付宝扫一扫 
