Open hzzzzzzzq opened 2 years ago
async 函数时什么,其实就是 Generator 的语法糖,只需要将 * 改写成 async,yield 改写成 await。 我们来看看 Generator 的写法,与 async 的写法。
async
Generator
*
yield
await
const readFile = function (fileName, ms) { return new Promise((resolve, reject) => { setTimeout(() => { console.log(fileName); resolve(fileName); // 需要给 `Promise` 一个状态转化,就是异步执行是否成功 }, ms); }); }; function* genator() { yield readFile('fileName1', 1000); yield readFile('fileName2', 2000); yield readFile('fileName3', 3000); console.log('打印完毕'); } const gen = genator(); gen.next(); // fileName1 gen.next(); // fileName2 gen.next(); // fileName3 async function asyncTest() { await readFile('fileName1', 1000); await readFile('fileName2', 2000); await readFile('fileName3', 3000); console.log('执行完毕'); } asyncTest(); // fileName1 // fileName2 // fileName3 // 执行完毕
从上面我们可以看出,我们需要手动调用 next 方法,来执行下一步。 而 async 有自己内置执行器。
next
我们来看看 async 对 Generator 的改进。
co
asyncTest();
语义更好 async/await,比起 Generator 函数的 * 与 yield,语义更清晰。 async 就表示异步,而 await 表示后面的表达式需要等待结果。
async/await
适用性更强 co 模块约定,yield 后面只能是 Thunk 函数或者 Promise 对象,而 await 后面可以是 Promise,也可以是原始类型值。
Thunk
Promise
返回值是 Promise async 函数返回值是 Promise 对象,可以用 then 方法来进行下一步操作。 await 命令就是内部 then 命令的语法糖。
then
return
JS
async function useAsync() { // readFile 使用的是本文顶部的方法 const result = await readFile('fileName', 1000); return result; } useAsync().then((value) => { console.log(value); }); // fileName // fileName
reject
catch
async function useAsync() { // readFile 使用的是本文顶部的方法 const result = await Promise.reject('测试错误'); console.log('打印?'); return result; } useAsync() .then((value) => { console.log(value); }) .catch((error) => { console.log(error); }); // 测试错误
await 命令后面是一个 Promise 对象,返回结果。如果不是 Promise,就直接返回对应值。
const add = (a, b) => { return a + b; }; async function useAsync() { const result = await add(1, 2); return result; } useAsync().then((value) => { console.log(value); }); // 3
await 后面跟着 add 方法,算出一个数值 3,然后将值 return 出来。
add
3
简单的 await 使用方法,就是如此。
Async/await
介绍
async
函数时什么,其实就是Generator
的语法糖,只需要将*
改写成async
,yield
改写成await
。 我们来看看Generator
的写法,与async
的写法。从上面我们可以看出,我们需要手动调用
next
方法,来执行下一步。 而async
有自己内置执行器。我们来看看
async
对Generator
的改进。next
执行器,外面手动调用,所以有co
模块,而 async 函数自带执行器,与普通函数一样,只需要一行调用。 下面代码中,调用了该函数之后,就会自动执行,输出最后结果。语义更好
async/await
,比起Generator
函数的*
与yield
,语义更清晰。async
就表示异步,而await
表示后面的表达式需要等待结果。适用性更强
co
模块约定,yield
后面只能是Thunk
函数或者Promise
对象,而await
后面可以是Promise
,也可以是原始类型值。返回值是
Promise
async
函数返回值是Promise
对象,可以用then
方法来进行下一步操作。await
命令就是内部then
命令的语法糖。用法
返回 Promise 对象
async
函数返回一个Promise
对象,可以使用then
方法加入回调函数。await
就会先返回,等异步操作结束,再继续执行函数体后面的语句。await
命令后面的Promise
对象执行完毕,状态才会改变,除非遇到return
或者报错。async
函数内部的异步操作执行完毕,就可以执行then
方法。JS
没有休眠的语法,但是借助await
命令就可以让程序停顿一定的时间。reject
状态,则会中断执行,并通过catch
捕获await 命令
await
命令后面是一个Promise
对象,返回结果。如果不是Promise
,就直接返回对应值。await
命令只能出现在async
命令函数内部,不然会报错。await
后面跟着add
方法,算出一个数值3
,然后将值return
出来。简单的
await
使用方法,就是如此。