当我第一次遇到异步 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 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 一起使用会产生更易于维护和理解的代码。