async和await是javascript中处理异步操作的语法糖，它们简化了promise的使用，使异步代码更直观、可读性更强。1. async函数默认返回一个promise；2. await用于等待promise解决或拒绝，只能在async函数内部使用；3. 使用try…catch可统一处理异步错误；4. 它不会阻塞主线程，而是暂停函数执行并让出控制权；5. 适用于串行异步任务、api请求、文件i/o、复杂流程控制等场景；6. 常见误区包括误认为await会阻塞线程、过度使用await导致串行化；7. 注意事项包含合理错误处理、避免顶层await滥用、避免无意义的await。
async和await是JavaScript中处理异步操作，尤其是Promise的语法糖，它们让异步代码看起来和同步代码一样直观，解决了回调地狱和Promise链过长的问题，极大提升了代码的可读性和可维护性。简单来说，它们让复杂的异步流程变得像写故事一样顺畅。
解决方案
async和await的用法其实非常直接。当你有一个函数需要执行异步操作，并且你希望等待这些操作完成后再继续执行后续代码时，它们就派上用场了。
首先，你需要用async关键字来声明一个函数。这个async函数会默认返回一个Promise。这意味着你可以在这个函数外部像处理普通Promise一样，使用.then()和.catch()来处理它的结果。
立即学习“Java免费学习笔记（深入）”；
async function fetchData() { // 这里的代码会执行异步操作 console.log("开始获取数据..."); // ...}fetchData().then(() => console.log("数据获取完成。"));
接着，在async函数内部，你可以使用await关键字。await只能在async函数中使用。它的作用是“暂停”当前async函数的执行，直到它后面的Promise被解决（resolved）或被拒绝（rejected）。一旦Promise解决，await会返回解决后的值；如果Promise被拒绝，await会抛出一个错误，你可以用try...catch来捕获它，就像处理同步错误一样。
async function fetchUserData(userId) { try { console.log(`开始获取用户 ${userId} 的数据...`); const response = await fetch(`https://api.example.com/users/${userId}`); // 假设这是一个返回Promise的API调用 if (!response.ok) { throw new Error(`HTTP 错误！状态码: ${response.status}`); } const userData = await response.json(); // 等待JSON解析完成 console.log(`成功获取用户 ${userId} 的数据:`, userData); return userData; } catch (error) { console.error(`获取用户 ${userId} 数据失败:`, error.message); throw error; // 重新抛出错误，让外部调用者也能处理 }}// 调用示例fetchUserData(123) .then(data => console.log("所有操作完成，最终数据:", data)) .catch(err => console.error("外部捕获到错误:", err.message));// 也可以在另一个async函数中await它async function main() { console.log("主程序开始运行。"); try { const user1Data = await fetchUserData(1); console.log("处理用户1数据..."); const user2Data = await fetchUserData(2); console.log("处理用户2数据..."); } catch (e) { console.error("主程序中捕获到错误:", e.message); } console.log("主程序运行结束。");}main();
通过这种方式，原本可能需要层层嵌套.then()回调的代码，现在可以写成看起来像是同步执行的顺序，这对于理解和维护代码来说，简直是质的飞跃。
async函数与普通函数有何不同？它们是如何工作的？
这确实是一个值得深思的问题。表面上看，async函数只是多了个关键字，但其内部机制和行为模式与普通函数有着本质的区别。
最核心的不同在于，一个async函数永远会返回一个Promise。即使你显式地让它返回一个非Promise的值，比如一个字符串或一个数字，JavaScript也会自动地将其包装在一个已解决（resolved）的Promise中。如果async函数内部抛出了一个错误（无论是通过throw语句还是await了一个被拒绝的Promise），那么它返回的Promise就会变成被拒绝（rejected）的状态，错误信息会作为拒绝的原因。
普通函数则不同，它们直接返回你指定的值，或者在抛出错误时中断执行。它们没有这种“默认Promise封装”的行为。
至于它们是如何工作的，这背后涉及到JavaScript的事件循环（Event Loop）机制。当你在一个async函数中使用await时，它并不会像同步代码那样真正地“阻塞”整个程序的执行。相反，它做的是：
暂停：当遇到await时，async函数会暂停自身的执行。让出控制权：它会将控制权交还给事件循环，允许其他待处理的任务（比如UI渲染、其他事件回调）继续执行。等待：它等待await后面的那个Promise解决或拒绝。恢复：一旦Promise解决或拒绝，async函数会被重新放入事件队列，并在下一个事件循环周期中从上次暂停的地方继续执行。如果Promise解决，await表达式会得到其结果；如果Promise拒绝，错误会被抛出。
所以，async/await并不是魔法，它只是在Promise和生成器（Generator）的基础上提供了一个更高级、更易读的抽象。它让异步代码在逻辑上看起来是线性的，但在底层，它依然是异步的，不会阻塞主线程，这对于构建响应式的用户界面和高性能的后端服务至关重要。我个人觉得，理解这一点是掌握async/await精髓的关键，否则很容易误以为它真的让异步变成了同步，从而写出阻塞UI的代码。
在哪些场景下使用async/await能显著提升代码质量？
async/await的出现，确实让很多曾经让人头疼的异步编程场景变得清晰明了。在我看来，它最能发挥作用、显著提升代码质量的场景主要有以下几种：
串行化的异步操作链：这是最典型的应用场景。当你需要执行一系列异步任务，且每个任务都依赖于前一个任务的结果时，async/await的优势就体现出来了。比如，先获取用户ID，然后根据ID获取用户详情，再根据用户详情获取其订单列表。如果用传统的.then()链式调用，代码会显得冗长且嵌套，而async/await则能让这段逻辑看起来就像一步步同步执行。
// 假设有三个异步函数：// getUser(id) -> Promise// getUserProfile(userId) -> Promise// getUserOrders(profileId) -> Promiseasync function fetchCompleteUserData(userId) { const user = await getUser(userId); const profile = await getUserProfile(user.id); const orders = await getUserOrders(profile.id); return { user, profile, orders };}
API请求与数据处理：在前端开发中，与后端API交互是常态。async/await使得fetch等API请求的处理变得异常简洁。你可以轻松地等待网络响应，然后等待JSON解析，整个过程一气呵成，错误处理也直接通过try...catch完成。这比早期的XMLHttpRequest回调或者复杂的Promise链条要优雅得多。
文件I/O操作：在Node.js环境中，许多文件系统操作（如fs.readFile, fs.writeFile）都提供了Promise版本的API（通过fs.promises模块）。使用async/await来读写文件、处理目录结构，可以避免回调地狱，让文件操作逻辑清晰可见。
const fs = require('fs').promises; // 导入Promise版本的fs模块async function processFile(filePath) { try { const content = await fs.readFile(filePath, 'utf8'); const modifiedContent = content.toUpperCase(); await fs.writeFile(`${filePath}.upper`, modifiedContent); console.log("文件处理完成！"); } catch (error) { console.error("文件处理失败:", error); }}
复杂的异步流程控制：当你的业务逻辑涉及到多个并行或串行的异步分支，或者需要根据某个异步操作的结果来决定下一步的异步操作时，async/await配合Promise.all()或Promise.race()等工具，能让你更好地组织代码。它让复杂的控制流变得可读，减少了理解代码所需的认知负荷。
错误处理：这是我个人最喜欢async/await的一点。由于await会抛出被拒绝的Promise错误，你可以像处理同步代码一样，直接使用try...catch块来捕获和处理异步操作中的错误。这比在每个.then()后面接一个.catch()，或者在Promise链的末尾统一处理要直观和健壮得多，尤其是当错误可能发生在链条的任何一个环节时。
总的来说，任何涉及异步操作，特别是需要等待结果才能进行下一步操作的场景，async/await都能带来巨大的便利和代码质量提升。它让异步代码更符合人类的思维习惯，减少了心理负担。
使用async/await时常见的误区和注意事项有哪些？
尽管async/await极大地简化了异步编程，但如果不理解其背后的原理，也容易陷入一些常见的误区，或者忽略一些重要的最佳实践。
误区：await会阻塞主线程这是最常见的误解。如前所述，await只会暂停其所在的async函数的执行，并将控制权交还给事件循环。它不会阻塞JavaScript的主线程，因此不会导致浏览器页面卡死或Node.js服务器无响应。如果你发现代码被阻塞了，那很可能是因为你写了一个同步的、计算密集型的循环，而不是await本身的问题。
误区：所有异步操作都应该await并非如此。如果你有多个异步操作可以并行执行，并且它们之间没有依赖关系，那么你应该考虑使用Promise.all()（或Promise.allSettled()）来并发执行它们，而不是一个接一个地await。一个接一个地await会导致它们串行执行，白白浪费了并行处理的效率。
// 错误示范：串行执行，效率低async function fetchAllDataSlowly() { const data1 = await fetchData('/api/data1'); const data2 = await fetchData('/api/data2'); const data3 = await fetchData('/api/data3'); return [data1, data2, data3];}// 正确示范：并行执行，效率高async function fetchAllDataFast() { const [data1, data2, data3] = await Promise.all([ fetchData('/api/data1'), fetchData('/api/data2'), fetchData('/api/data3') ]); return [data1, data2, data3];}
注意事项：错误处理虽然try...catch让错误处理变得直观，但你必须确保await的Promise被正确地包含在try块中。如果一个async函数内部的await没有被try...catch包裹，那么当它所await的Promise被拒绝时，错误会向上冒泡，直到被某个async函数的调用者捕获，或者最终导致未捕获的Promise拒绝（unhandled promise rejection），这在Node.js中可能导致进程崩溃，在浏览器中则会触发全局错误事件。因此，为关键的await操作加上try...catch是良好的实践。
注意事项：顶层await在ES Modules中，你现在可以直接在模块的顶层使用await，而不需要将其包裹在async函数中。这是一个非常方便的特性，但请注意，它仅限于ES Modules。在普通的脚本文件（script标签或CommonJS模块）中，你仍然需要将await放在一个async函数内部，或者使用一个立即执行的async函数表达式（IIFE）。
// 在ES Module (e.g., main.mjs) 中// const data = await fetchData('/api/some-data');// console.log(data);// 在普通脚本或CommonJS模块中，需要IIFE(async () => { try { const data = await fetchData('/api/some-data'); console.log(data); } catch (error) { console.error("获取数据失败:", error); }})();
注意事项：不必要的await有时你会看到代码中await了一个根本不是Promise的值，或者await了一个你根本不需要等待其结果的Promise。虽然JavaScript会将其包装成一个已解决的Promise，但这种做法是多余的，可能会让人误解代码的意图。只有当确实需要等待一个Promise的结果时，才使用await。
调试尽管async/await让代码看起来更同步，但其异步本质在调试时仍需注意。断点可能会在await处“跳跃”，因为函数的执行被暂停并稍后恢复。不过，现代的浏览器开发者工具和IDE对async/await的调试支持已经非常成熟，通常能很好地追踪异步调用栈。
掌握这些点，能让你在使用async/await时更加游刃有余，写出既高效又易于维护的异步JavaScript代码。
以上就是async和await在JavaScript中怎么用？有什么作用？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1508938.html
微信扫一扫 
支付宝扫一扫 
