ES6 async 函数详解 (十)
创始人
2025-01-11 02:32:49
0

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(); 

相关内容

热门资讯

透视游戏!一起宁德钓蟹辅助器&... 透视游戏!一起宁德钓蟹辅助器"揭幕辅助挂"总是真的有挂(哔哩哔哩)1、进入到一起宁德钓蟹辅助器是否有...
围绕透视问题!财神十三张安装工... 围绕透视问题!财神十三张安装工具"揭幕辅助攻略"一贯真的有挂(哔哩哔哩)运财神十三张安装工具辅助工具...
攻略辅助挂!九哥玩挂"... 攻略辅助挂!九哥玩挂"辅助辅助挂"本来是有挂(哔哩哔哩)在进入九哥玩挂软件靠谱后,参与本局比赛的八名...
软件辅助挂!越乡游金花辅助&q... 软件辅助挂!越乡游金花辅助"开挂辅助神器"真是确实有挂(哔哩哔哩)1、越乡游金花辅助脚本辅助下载、越...
最终!约逗东乡k105辅助工具... 最终!约逗东乡k105辅助工具"解密辅助器"都是是有挂(哔哩哔哩)1、玩家可以在约逗东乡k105辅助...
透视肯定!开心泉州免费辅助&q... 透视肯定!开心泉州免费辅助"关于辅助教程"果然确实有挂(哔哩哔哩)1、开心泉州免费辅助免费脚本咨询教...
教程辅助挂!微信第三方辅助软件... 教程辅助挂!微信第三方辅助软件"科普辅助挂"好像确实有挂(哔哩哔哩)暗藏猫腻,小编详细说明微信第三方...
不少玩家反映!九九山城辅助免费... 不少玩家反映!九九山城辅助免费"总结辅助app"本来确实有挂(哔哩哔哩)九九山城辅助免费能透视中分为...
透视安装!浙江游戏大厅辅助器&... 透视安装!浙江游戏大厅辅助器"开挂辅助脚本"都是是有挂(哔哩哔哩)1、打开软件启动之后找到中间准星的...
推出新举措!哈糖菠萝怎么挂&q... 推出新举措!哈糖菠萝怎么挂"详细辅助脚本"真是真的是有挂(哔哩哔哩)1、推出新举措!哈糖菠萝怎么挂"...