当我第一次遇到异步 javascript 时，我在回调方面遇到了困难，并且不知道 promises 在幕后是如何工作的。随着时间的推移，对 promise 和 async/await 的了解改变了我的编码方法，使其更易于管理。在本博客中，我们将逐步探索这些异步模式，揭示它们如何简化您的开发流程并使您的代码更干净、更高效。让我们一起深入探讨并揭开这些概念！
学习异步 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(null, 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 并探索它们在幕后是如何工作的。
promises 是表示异步操作最终完成（或失败）及其结果值的对象。与回调相比，它们提供了一种更简洁的方式来处理异步代码。
承诺的目的：
promise 可以处于以下三种状态之一：
注意：如果您想探索更多内容，您应该查看了解 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 的结果都可以传递到链中的下一步。
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 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();
在此示例中：
使用 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 的函数无缝结合使用。
示例
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();
最佳实践：
与传统的 promise 链和回调相比，async 和 wait 提供了一种更清晰、更易读的方式来处理异步操作。通过允许您编写外观和行为类似于同步代码的异步代码，它们可以简化复杂的逻辑并使用 try/catch 块改进错误处理。将 async/await 与 promise 一起使用会产生更易于维护和理解的代码。