es6 generator函数和async await的关系

generator 算是中间的一个过渡版,但是也有其独有的东西。
转载自:https://www.jianshu.com/p/c94edc0057fe

generator可以简化异步的编码,减少嵌套,而async、await组合起来使用,可以更进一步

next方法的作用是分阶段执行Generator函数。每次调用next方法,会返回一个对象,表示当前阶段的信息(value属性和done属性)。value属性是yield语句后面表达式的值,表示当前阶段的值;done属性是一个布尔值,表示Generator函数是否执行完毕,即是否还有下一个阶段。

 async函数的返回值是Promise对象,这比Generator函数的返回值是Iterator对象方便多了。

reject之后下边的代码不执行了该如何处理。

 不过处理方法为第一种try catch 比较好,如果是多个await 直接能一起处理,如果是第二种代码冗余显得有些累赘。

 多个await命令后面的异步操作,如果不存在继发关系,最好让它们同时触发。

let foo = await getFoo();
let bar = await getBar();
上面代码中,getFoogetBar是两个独立的异步操作(即互不依赖),被写成继发关系。这样比较耗时,因为只有getFoo完成以后,才会执行getBar,完全可以让它们同时触发。
修改如下: (推荐第一种)
// 写法一
let [foo, bar] = await Promise.all([getFoo(), getBar()]);

// 写法二
let fooPromise = getFoo();
let barPromise = getBar();
let foo = await fooPromise;
let bar = await barPromise;

并发请求多个接口,按顺序输出
async function logInOrder(urls) {
  // 并发读取远程URL
  const textPromises = urls.map(async url => {
    const response = await fetch(url);
    return response.text();
  });

  // 按次序输出
  for (const textPromise of textPromises) {
    console.log(await textPromise);
  }
}
上面代码中,虽然map方法的参数是async函数,但它是并发执行的,因为只有async函数内部是继发执行,外部不受影响。后面的for..of循环内部使用了await,因此实现了按顺序输出。


原文地址:https://www.cnblogs.com/xiaoyaoweb/p/12882509.html