ES7 async、await

·  阅读 2908

定义

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循环就会中止,且不包含该返回对象。

分类:
前端
收藏成功!
已添加到「」, 点击更改