ES6 async 函数详解 (十)

avatar
作者
筋斗云
阅读量:1

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

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!