ES7 async、await

定义

async用于声明一个function是异步的，而await用于等待一个异步方法执行完成。

• async/await是generator的语法糖
• async/await解决了promise代码冗余问题

async

async声明function是一个异步函数，返回一个promise对象，可以使用then方法添加回调函数。async函数内部return语句返回的值，会成为then方法回调函数的参数.

基本用法

• async函数返回一个promise对象，可以使用then方法添加回调函数

async function test(){
   return '张三'
}
// async返回的是一个promise对象，如果async函数没有返回值，async函数返回一个undefined的promise对象
test().then(res=>{
 console.log(res);//张三
})

• 当函数执行的时候，一旦遇到await就会返回，等到异步操作完成，再接着执行函数体内后面的语句

await

async、await执行顺序

await后面的函数执行完毕时，await会产生一个微任务（promise.then是微任务）,执行完await之后，直接跳出async函数，执行其他代码。

console.log('script start') 
async function async1() { 
   await async2() 
   console.log('async1 end')
} 
async function async2() { 
   console.log('async2 end') 
} 
async1() 
setTimeout(function() { 
   console.log('setTimeout') 
}, 0)
new Promise(resolve =>{
  console.log('Promise')
  resolve()
})
.then(function(){
  console.log('Promise1')
})

// script start => async2 end => Promise => async1 end => Promise1 => setTimeout

console.log('script start') 
async function async1() { 
   await async2() 
   console.log('async1 end')
} 
async function async2() { 
   console.log('async2 end') 
   return Promise.resolve().then(()=>{
     console.log('async2 end1')
   })
} 
async1() 
setTimeout(function() { 
   console.log('setTimeout') 
}, 0)
new Promise(resolve =>{
  console.log('Promise')
  resolve()
})
.then(function(){
  console.log('Promise1')
})

// script start => async2 end => Promise  =>async2 end1 => promise1  => async1 end => setTimeout

额外扩展 (generator函数)

定义

一个函数的内部状态的遍历器，每调用一次，函数的内部状态发生一次改变。

特征

• function关键字与函数名之间有一个*
• 函数体内使用yield语句

function* test(){
  yield 'hello';
  yield 'world'
}
var ts = test();// 第一次调用该方法不会执行，仅返回一个遍历器
ts.next()

运行过程解析：

• 当调用generator函数时，该函数并不执行，而是返回一个遍历器。
• 通过调用next()开始执行，遇到yield停止执行，返回一个value属性值为当前yield语句的值，done属性为false的对象。
• 循环调用next()，一直执行到return语句（如果没有return语句，就执行到函数结束）。

next()参数

next方法返回的对象的value属性，是return语句后面的表达式的值（如果没有return语句，则value属性的值为undefined），done属性的值为true，表示遍历结束。

for...of可以遍历generator函数

function * foo(){
  yield 1;
  yield 2;
  yield 3;
  yield 4;
  return 5;
}
for(let v of f00()){
  console.log(v)
}
// 1,2,3,4

解析：一旦next方法返回的对象的done属性为true，for...of循环就会中止，且不包含该返回对象。