秒懂！JS 让异步执行的方法同步执行，让你的代码更流畅！
2023-06-26 18:26:26
JavaScript 中的异步与同步：使用 async 和 await 编写更流畅的代码
在现代 Web 开发中，异步编程已成为编写响应迅速、高效应用程序的关键。在 JavaScript 中，异步和同步方法提供了两种不同的执行模型，在了解每种模型的优点和使用场景后，可以帮助我们做出明智的选择。
异步与同步：深入理解
异步方法：
异步方法不会立即执行，而是安排稍后在事件循环中执行。这通常用于不会立即得到结果的任务，例如网络请求或文件读取。异步方法的优点是不会阻塞主线程，允许应用程序在等待结果时继续执行其他任务，从而提高性能和用户体验。
同步方法：
同步方法会在调用时立即执行，并且会在结果返回后再继续执行。这通常用于需要立即得到结果的任务，例如数学计算或字符串操作。同步方法的缺点是，如果任务需要很长时间才能完成，会阻塞主线程，导致应用程序界面冻结或响应缓慢。
async 和 await：同步执行异步方法
为了解决异步方法的阻塞问题，ES2017 引入了 async 和 await 。async 用于标记一个函数是异步的，而 await 用于等待异步方法的结果返回，使我们能够以同步的方式编写异步代码。
async 函数：
async 函数是一个返回 Promise 的函数。它允许我们使用 await 关键字等待 Promise 的结果。async 函数的语法如下：
async function functionName() {
// 异步代码
}
**await **
await 关键字用于暂停函数的执行，直到异步操作完成。它只能用于 async 函数中，语法如下：
const result = await promise;
通过 async 和 await，我们可以以同步的方式编写异步代码，从而简化异步编程并提高代码可读性。
使用 async 和 await 的优势
- 提高性能：避免主线程阻塞，使应用程序更具响应性。
- 增强代码可读性：通过同步语法处理异步操作，使代码更易于理解和维护。
- 简化错误处理：通过
try...catch语句集中处理所有异步操作的错误，简化错误处理过程。
代码示例：
async function getData() {
try {
const response = await fetch('https://example.com/data');
const data = await response.json();
return data;
} catch (error) {
// 错误处理
}
}
getData().then(data => {
console.log(data);
});
注意事项：
async和await只能在async函数中使用。await关键字只能用于等待 Promise。- 如果
await后面的 Promise 被拒绝，则会抛出异常。
常见问题解答：
-
为什么使用 async 和 await？
为了提高性能和代码可读性，以同步方式编写异步代码。 -
如何使用 async 和 await？
将函数标记为async，使用await关键字等待异步操作完成。 -
async和await有什么区别？
async标记一个函数是异步的，await暂停函数执行并等待异步操作完成。 -
使用 async 和 await 时要注意什么？
只能在async函数中使用async和await，await只能用于等待 Promise。 -
async 和 await 的局限性是什么？
不能用于直接返回原始值，必须返回 Promise 或使用return await语法。
