ES6 async 函数详解 （十）

async 函数是什么？一句话，它就是 Generator 函数的语法糖。

const gen = function* () {const f1 = yield readFile('/etc/fstab');const f2 = yield readFile('/etc/shells');console.log(f1.toString());console.log(f2.toString());
};const asyncReadFile = async function () {const f1 = await readFile('/etc/fstab');const f2 = await readFile('/etc/shells');console.log(f1.toString());console.log(f2.toString());
};

async 函数就是将 Generator 函数的星号（ * ）替换成 async ，将 yield 替换成 await ，仅此而已。

async 函数对 Generator 函数的改进，体现在以下四点：

（1）内置执行器。
Generator 函数的执行必须靠执行器，所以才有了 co 模块，而 async 函数自带执行器。也就是说， async 函数的执行，与普通函数一模一样，只要一行。

co 模块：co 模块是著名程序员 TJ Holowaychuk 于 2013 年 6 月发布的一个小工具，用于 Generator 函数的自动执行。
co 模块可以让你不用编写 Generator 函数的执行器。

// Generator 函数
var gen = function* () {var f1 = yield readFile('/etc/fstab');var f2 = yield readFile('/etc/shells');console.log(f1.toString());console.log(f2.toString());
};//co模块使用
var co = require('co');
co(gen); //co 函数返回一个 Promise 对象
co(gen).then(function (){console.log('Generator 函数执行完成');
});

（2）更好的语义。
async 和 await ，比起星号和 yield ，语义更清楚了。 async 表示函数里有异步操作， await 表示紧跟在后面的表达式需要等待结果。
（3）更广的适用性。
co 模块约定， yield 命令后面只能是 Thunk 函数或 Promise 对象，而 async 函数的 await 命令后面，可以是 Promise 对象和原始类型的值（数值、字符串和布尔值，但这时会自动转成立即 resolved 的 Promise 对象）。
（4）返回值是 Promise。
async 函数的返回值是 Promise 对象，这比 Generator 函数的返回值是 Iterator 对象方便多了。你可以用 then 方法指定下一步的操作。

进一步说， async 函数完全可以看作多个异步操作，包装成的一个 Promise 对象，而 await 命令就是内部 then 命令的语法糖。

1. 基本的 async 函数

// 定义一个异步函数
async function fetchData() {return 'Data fetched';
}// 调用异步函数
fetchData().then(data => {console.log(data); // 输出: Data fetched
});

2. 使用 await 等待 Promise

// 模拟一个异步请求函数
function getUserData() {return new Promise(resolve => {setTimeout(() => resolve({ name: 'Alice' }), 1000);});
}// 异步函数使用 await 等待 Promise
async function printUserData() {try {const userData = await getUserData();console.log(userData); // 输出: { name: 'Alice' }} catch (error) {console.error(error);}
}printUserData();

3. 错误处理

// 异步函数中的错误处理
async function riskyFunction() {try {const result = await Promise.reject('An error occurred');} catch (error) {console.error(error); // 输出: An error occurred}
}riskyFunction();

4. 链式 async 函数

async function asyncOperation() {return 'Operation completed';
}async function chainAsyncFunctions() {try {const result1 = await asyncOperation();const result2 = await asyncOperation();console.log(result1, result2); // 输出: Operation completed Operation completed} catch (error) {console.error(error);}
}chainAsyncFunctions();

5. async 函数作为事件处理函数

// 假设有一个按钮元素
const button = document.querySelector('#myButton');// 为按钮添加点击事件处理函数
button.addEventListener('click', async event => {try {const data = await fetchData();console.log(data);} catch (error) {console.error(error);}
});

6. async 函数与 Promise.all

// 异步函数返回多个 Promise
async function fetchUsers() {return ["User1", "User2", "User3"];
}async function fetchPosts() {return ["Post1", "Post2", "Post3"];
}// 使用 Promise.all 并行处理多个异步操作
async function fetchAllData() {try {const [users, posts] = await Promise.all([fetchUsers(), fetchPosts()]);console.log(users, posts); // 输出: [ 'User1', 'User2', 'User3' ] [ 'Post1', 'Post2', 'Post3' ]} catch (error) {console.error(error);}
}fetchAllData();