async/await笔记

2017-2-8    分类: JavaScript笔记,前端资源

es7语法,主要作用让异步操作更简单,在Generator函数基础上优化得来

 

Generator 函数

var gen = function* () {
  var f1 = yield readFile('/etc/fstab');
  var f2 = yield readFile('/etc/shells');
};

 

调用:

gen().next()
gen().next()
gen().next()
...

 

 

async函数

var asyncReadFile = async function (){
  var f1 = await readFile('/etc/fstab');
  var f2 = await readFile('/etc/shells');
};

 

调用:

asyncReadFile()

 

async函数就是将 Generator 函数的星号(*)替换成async,将yield替换成await,仅此而已。
调用的方法也明显不同,Generator需要使用next()来一个个调用,而async跟普通函数调用一样

http://es6.ruanyifeng.com/?search=await&x=5&y=7#docs/async 

 

 

 

async/await其实是Generator函数的语法糖。异步编程可以使用async/await配合Promise对象来实现,语法易读。

要理解async/await在js中的执行顺序,没有一点基础理论支持是很难理解的。

 

1,async 用于申明一个 function 是异步的,所以在该function里面的程序都是异步的,但有时也需要依赖某个函数执行完成得到结果才能继 续执行,这时候可以在函数体里面使用await

2,await 只能出现在 async 函数中

3,await后面可以接着一个直接变量或者是一个promise对象

4,await后面接着是promise对象,async函数体内就会阻塞要等await后面的promise函数执行完成才会继续往下走。async函数体外的代码可不 会去一直等待。

5,如果在函数中 return 一个直接量,async 会把这个直接量通过 Promise.resolve() 封装成 Promise 对象。

6,在没有 await 的情况下执行 async 函数,它会立即执行,返回一个 Promise 对象,并且,绝不会阻塞后面的语句。这和直接new Promise 对象效果一样。

 

关于async更多了解,查看此案例更直接:async.html

修改后async.html