Javascript 异步函数(Async/Await)
尽管传统的回调函数和Promise链式调用技术能够有效地应对异步操作(例如网络请求、文件读取等),但它们常常导致代码结构错综复杂,降低了代码的可读性。ES8引入了async/await这一语法糖,它能够让异步代码书写得像同步代码一样直观,显著提升了代码的可读性和可维护性,使得异步逻辑更加清晰易懂。
基本语法
async
:关键字用于声明一个异步函数,函数返回一个Promise
。await
:只能在async
函数中使用,用于等待一个Promise
的结果。
当异步函数执行时,遇到await
时会暂停执行,直到Promise
完成,然后继续执行函数体内后续的代码。
// 声明一个异步函数
async function fetchData(url) {
// 等待 fetch 请求完成并获取响应
const response = await fetch(url);
// 等待响应解析为 JSON
const data = await response.json();
return data;
}
Async/Await 完整示例
下面是一个完整的示例代码,展示了如何使用async/await
进行网络请求并处理数据。
// 引入 fetch polyfill 以支持所有环境(如Node.js)
const fetch = require('node-fetch');
// 异步函数:获取指定API的数据
async function fetchData(url) {
try {
// 发送网络请求并等待响应
const response = await fetch(url);
// 检查响应状态
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
// 解析响应为 JSON 并等待完成
const data = await response.json();
// 返回解析后的数据
return data;
} catch (error) {
// 捕获并处理错误
console.error('Fetch data failed:', error);
}
}
// 使用示例:从一个API获取数据并在控制台打印
(async () => {
const url = 'https://jsonplaceholder.typicode.com/posts/1';
const postData = await fetchData(url);
// 打印获取的数据
console.log(postData);
})();