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的世界里，错误处理的逻辑变得异常直观，几乎和同步代码中的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虽然好用，但用起来也有些地方需要留心，不然可能达不到预期效果，甚至引入新的问题。
一个常见误区是在循环中滥用await。比如，你需要处理一个数组里的所有元素，每个元素都需要一个异步操作：
// 误区：串行执行，效率低下
async function processItemsSequentially(items) {
for (const item of items) {
await someAsyncOperation(item); // 每个await都会暂停，等待上一个完成
console.log(`处理完 ${item}`);
}
}
// 最佳实践：并行执行，使用Promise.all
async 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的强大之处在于它能以同步的思维模式处理各种复杂的异步流程，大大简化了代码结构。
处理并发与竞速：
除了上面提到的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怎么用？如何捕获错误？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
676
