async和await是javascript中处理异步操作的语法糖，它们基于promise并使异步代码更像同步代码。1. async用于声明异步函数，该函数返回promise；2. await只能在async函数内使用，会暂停执行直到promise解决或拒绝；3. 使用try…catch可统一捕获错误，提升错误处理的可读性；4. 在循环中滥用await会导致串行执行降低效率，应结合promise.all实现并发；5. async函数总是返回promise，即使返回的是普通值也会被包装；6. 现代环境支持顶层await，无需包裹在async函数中；7. 可结合promise.race实现竞速逻辑，如请求超时控制；8. promise.allsettled可用于处理多个独立任务的结果，无论成功或失败；9. 条件性await让异步逻辑根据条件动态决定后续流程。这些特性让异步编程更加直观、简洁且易于维护。
JavaScript中的async和await是处理异步操作的语法糖，它们让基于Promise的异步代码看起来和写起来都更像同步代码，极大地提升了代码的可读性和维护性。简单来说，async关键字用于声明一个函数是异步的，这个函数总是返回一个Promise；而await关键字只能在async函数内部使用，它会暂停async函数的执行，直到它等待的Promise被解决（resolved）或拒绝（rejected）。
解决方案
使用async和await的核心在于将原本链式调用的Promise操作，转化为更直观的顺序执行模式。
一个基本的用法是这样的：
立即学习“Java免费学习笔记（深入）”；
async function fetchData() { console.log('开始获取数据...'); try { const response = await fetch('https://api.example.com/data'); // 假设这是一个有效的API if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); console.log('数据获取成功:', data); return data; } catch (error) { console.error('获取数据失败:', error.message); // 这里可以根据错误类型做进一步处理，比如返回一个默认值或者抛出新的错误 throw error; // 重新抛出错误，让调用者也能捕获 } finally { console.log('数据获取流程结束。'); }}// 调用异步函数fetchData().then(result => { console.log('外部处理结果:', result);}).catch(err => { console.error('外部捕获错误:', err.message);});// 另一个例子：模拟一个异步操作function simulateAsyncOperation(success = true) { return new Promise((resolve, reject) => { setTimeout(() => { if (success) { resolve("操作成功完成！"); } else { reject(new Error("操作失败了，出错了。")); } }, 1000); });}async function runSimulation() { console.log('开始模拟...'); try { const result = await simulateAsyncOperation(true); // 尝试成功 console.log(result); // 尝试失败 const failedResult = await simulateAsyncOperation(false); console.log(failedResult); // 这行不会执行，因为上面会抛出错误 } catch (error) { console.error('模拟操作中捕获到错误:', error.message); } console.log('模拟结束。');}runSimulation();
当你调用一个async函数时，它会立即执行，直到遇到第一个await表达式。此时，函数会暂停执行，并将控制权交还给调用栈。一旦await等待的Promise解决（resolve），async函数会从暂停的地方继续执行。如果Promise被拒绝（reject），那么拒绝的值会作为错误被抛出，你就可以用try...catch来捕获它。
在async/await中，我们如何优雅地处理可能出现的异常？
在async/await的世界里，错误处理的逻辑变得异常直观，几乎和同步代码中的try...catch一模一样。这是它最大的魅力之一，让异步错误不再那么难以捉摸。当一个await表达式所等待的Promise被拒绝时，这个拒绝的值（通常是一个Error对象）会被立即“抛出”，就像同步代码中throw new Error()一样。所以，我们自然而然地使用try...catch块来捕获这些错误。
async function processDataWithErrorHandling() { console.log('尝试处理数据...'); try { // 假设这个API调用可能会失败 const response = await fetch('https://api.broken-example.com/data'); if (!response.ok) { // 检查HTTP状态码，如果不是2xx，也视为错误 throw new Error(`网络请求失败，状态码: ${response.status}`); } const data = await response.json(); console.log('数据处理成功:', data); } catch (error) { // 任何在try块中发生的Promise拒绝（await的Promise拒绝） // 或者同步抛出的错误，都会被这里捕获 console.error('数据处理过程中发生错误:', error.message); // 根据错误类型做不同的处理 if (error.message.includes('Failed to fetch')) { console.error('可能是网络问题或URL错误。'); } else if (error.message.includes('status')) { console.error('服务器返回了非成功的状态码。'); } else { console.error('一个未预期的错误。'); } // 甚至可以抛出自定义的错误，或者返回一个默认值 throw new Error('无法完成数据处理，请稍后再试。'); } finally { // 无论成功或失败，finally块总会执行 console.log('数据处理流程结束。'); }}// 调用并捕获外部的错误processDataWithErrorHandling().catch(err => { console.error('外部捕获到最终错误:', err.message);});
这种模式让错误处理逻辑集中且清晰，避免了Promise链中.catch()可能带来的分散和理解上的跳跃。你可以在try块中放置多个await表达式，任何一个await的Promise被拒绝，都会立即跳转到catch块，非常方便。
使用async/await时有哪些常见的误区或需要注意的最佳实践？
async/await虽然好用，但用起来也有些地方需要留心，不然可能达不到预期效果，甚至引入新的问题。
一个常见误区是在循环中滥用await。比如，你需要处理一个数组里的所有元素，每个元素都需要一个异步操作：
// 误区：串行执行，效率低下async function processItemsSequentially(items) { for (const item of items) { await someAsyncOperation(item); // 每个await都会暂停，等待上一个完成 console.log(`处理完 ${item}`); }}// 最佳实践：并行执行，使用Promise.allasync function processItemsConcurrently(items) { console.log('开始并行处理...'); const promises = items.map(item => someAsyncOperation(item)); try { const results = await Promise.all(promises); // 等待所有Promise完成 console.log('所有项目并行处理完成:', results); } catch (error) { console.error('并行处理中发生错误:', error.message); }}// 模拟异步操作function someAsyncOperation(item) { return new Promise(resolve => { setTimeout(() => { console.log(`正在处理 ${item}...`); resolve(`处理结果 for ${item}`); }, 500); });}const myItems = ['A', 'B', 'C'];// processItemsSequentially(myItems); // 会依次打印 A, B, C 的处理完成信息processItemsConcurrently(myItems); // 会几乎同时打印 A, B, C 的处理中信息，然后一起打印完成信息
如果每个异步操作之间没有依赖关系，使用Promise.all（或Promise.allSettled）配合await是更高效的做法，它会并发执行所有操作，然后等待它们全部完成。
另一个小点是，async函数总是返回一个Promise。如果你定义了一个async函数，但里面没有await，或者它只是返回一个非Promise的值，这个值也会被包装成一个已解决的Promise。这本身不是错误，但有时候会让人疑惑。
async function greet() { return "Hello, async!"; // 实际上返回的是 Promise.resolve("Hello, async!")}greet().then(msg => console.log(msg)); // 输出: Hello, async!
还有，顶层await的使用。在早期的JavaScript中，await只能在async函数内部使用。但现在，现代浏览器和Node.js（ES Modules环境下）已经支持了顶层await，这意味着你可以在模块的顶层直接使用await，而无需将其包裹在async函数中。这让一些脚本的编写变得更加简洁。
// 假设这是一个ES模块文件 (e.g., myModule.mjs)// const response = await fetch('https://api.example.com/config');// const config = await response.json();// console.log('全局配置:', config);
不过，在非模块脚本或老旧环境中，你可能仍然需要使用IIFE（立即执行函数表达式）来模拟顶层await。
除了基础用法，async/await还能应对哪些复杂异步场景？
async/await的强大之处在于它能以同步的思维模式处理各种复杂的异步流程，大大简化了代码结构。
处理并发与竞速：除了上面提到的Promise.all用于并发执行所有任务并等待它们全部完成，我们还可以用Promise.race来处理竞速场景。当我们需要多个异步操作中，只要有一个率先完成（无论是成功还是失败），就立即获取其结果时，Promise.race就派上用场了。
async function fastestResponse() { const timeout = new Promise((resolve, reject) => { setTimeout(() => reject(new Error('请求超时！')), 3000); // 3秒超时 }); try { const result = await Promise.race([ fetch('https://api.fast-service.com/data').then(res => res.json()), fetch('https://api.backup-service.com/data').then(res => res.json()), timeout // 引入超时机制 ]); console.log('最快响应数据:', result); } catch (error) { console.error('获取最快响应失败:', error.message); }}// fastestResponse();
这个例子展示了如何结合Promise.race和await来实现一个带超时的请求，或者从多个数据源中获取最快响应。
处理多个独立但可能失败的异步操作：有时候，我们有多个独立的异步任务，即使其中一个失败了，我们也希望其他任务能继续执行，并且最终能拿到所有任务的结果（无论成功与否）。这时，Promise.allSettled就是理想选择。它返回一个Promise，该Promise在所有给定的Promise都已解决或拒绝后解决，并带有一个描述每个Promise结果的对象数组。
async function fetchMultipleResources() { const urls = [ 'https://api.example.com/resource1', 'https://api.example.com/resource2', // 假设这个会成功 'https://api.broken-example.com/resource3', // 假设这个会失败 'https://api.example.com/resource4' ]; const fetchPromises = urls.map(url => fetch(url) .then(res => { if (!res.ok) throw new Error(`HTTP error! status: ${res.status} for ${url}`); return res.json(); }) .catch(err => { // 这里捕获并记录每个单独的fetch错误，防止Promise.allSettled中断 console.warn(`Fetch error for ${url}: ${err.message}`); throw err; // 重新抛出，让allSettled知道它是rejected }) ); const results = await Promise.allSettled(fetchPromises); results.forEach((result, index) => { if (result.status === 'fulfilled') { console.log(`资源 ${urls[index]} 成功:`, result.value); } else { console.error(`资源 ${urls[index]} 失败:`, result.reason.message); } });}// fetchMultipleResources();
Promise.allSettled与async/await结合，让处理这种“部分成功部分失败”的复杂场景变得非常清晰和可控。你不再需要复杂的嵌套try...catch或者在.then().catch()链中做额外的状态管理。
条件性await：在某些情况下，你可能需要根据某个条件来决定是否执行一个异步操作，或者等待不同的异步操作。
async function getUserData(userId, fetchDetails = false) { const userResponse = await fetch(`https://api.example.com/users/${userId}`); const userData = await userResponse.json(); if (fetchDetails && userData.hasDetailedInfo) { console.log('正在获取用户详细信息...'); const detailsResponse = await fetch(`https://api.example.com/users/${userId}/details`); const userDetails = await detailsResponse.json(); return { ...userData, details: userDetails }; } return userData;}// getUserData(123, true).then(data => console.log('用户数据:', data));// getUserData(456, false).then(data => console.log('简要用户数据:', data));
这种模式让异步逻辑和同步逻辑自然地融合在一起，代码流程一目了然。async/await的引入，无疑是JavaScript异步编程领域的一次巨大飞跃，它让原本可能复杂缠绕的异步代码，变得像读故事一样流畅。
以上就是JavaScript的async和await怎么用？如何捕获错误？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1568637.html
微信扫一扫 
支付宝扫一扫 
