解决函数回调经历了几个阶段, Promise 对象, Generator 函数到async函数。async函数目前是解决函数回调的最佳方案。很多语言目前都实现了async,包括Python ,java spring,go等。
async await 的用法
async 函数返回一个 Promise 对象,当函数执行的时候,一旦遇到 await 就会先返回,等到触发的异步操作完成,再接着执行函数体内后面的语句。
function getNum(num){
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(num+1)
}, 1000)
})
}
const func = async ()=>{
const f1 = await getNum(1)
const f2 = await getNum(f1)
console.log(f2)
// 输出3
}
func()
复制代码
async /await 需要在function外部书写async,在内部需要等待执行的函数前书写await即可
深入理解
理解async函数需要先理解Generator函数,因为 async函数是Generator函数的语法糖
。
Generator[ˈdʒɛnəˌretɚ]函数-生成器
Generator是ES6标准引入的新的数据类型。Generator可以理解为一个状态机,内部封装了很多状态,同时返回一个迭代器Iterator对象。可以通过这个迭代器遍历相关的值及状态。
Generator的显著特点是可以多次返回,每次的返回值作为迭代器的一部分保存下来,可以被我们显式调用。
Generator函数的声明
一般的函数使用function声明,return作为回调(没有遇到return,在结尾调用return undefined),只可以回调一次。而Generator函数使用function*定义,除了return,还使用yield返回多次。
function* foo(x) {
yield x + 1;
yield x + 2;
return x + 3;
}
const result = foo(0) // foo {}
result.next(); // {value: 1, done: false}
result.next(); // {value: 2, done: false}
result.next(); // {value: 3, done: true}
result.next(); //{value: undefined, done: true}
复制代码
在chrome浏览器中这个例