zoukankan      html  css  js  c++  java
  • Await/Async

    Async其实就是Generator函数的语法糖。

    啥是语法糖?就是一种更容易让人理解,代码可读性更高的另外一种语法。

    const asyncRead = async function(){
        const f1 = await readFile("/etc/fstab");
        const f2 = await readFile("etc/shells");
        console.log(f1.toString());
        console.log(f2.toString());
    }

    可以跟Generator函数对比:就是把(*)替换成async,将yeild换成了await,仅此而已。

    不同点在于:async函数的执行,直接执行函数名  asyncRead(),就会自动执行,不需要像Generator函数那样,调用next方法才执行。

    Async函数的返回值时Promise对象,而Generator函数的返回值是Iterator对象,async函数完全是可以看做是多个异步操作,包装成的一个Promise对象,而await命令只是内部then的语法糖。 

    1,基本用法:

    在上一张的一个图中,可以看出,promise,Generator,Async/Awati的强弱关系:

    Generator < Promise < Async/Await,可以看出async/await的功能之强大。所以更得好好学习呀~~~

    async function timeout(ms){
        await new Promise((resolve)=>{
            setTimeout(resolve,ms);
        })
    }
    async function asyncPrint(value,ms){
        await timeout(ms);
        console.log(value);
    }
    asyncPrint('hello',50)

    上面代码指定50毫秒之后输hello world。

    Async的多种使用形式:

    // 函数声明
    async function foo() {}
    
    // 函数表达式
    const foo = async function () {};
    
    // 对象的方法
    let obj = { async foo() {} };
    obj.foo().then(...)
    
    // Class 的方法
    class Storage {
      constructor() {
        this.cachePromise = caches.open('avatars');
      }
    
      async getAvatar(name) {
        const cache = await this.cachePromise;
        return cache.match(`/avatars/${name}.jpg`);
      }
    }
    
    const storage = new Storage();
    storage.getAvatar('jake').then(…);
    
    // 箭头函数
    const foo = async () => {};

    1,await命令

    正常情况下,await后面是一个promise对象,如果不是,会被转化为一个立即resolve的promise对象。

    async function f(){
        await Promise.reject('error');
    }
    f().then(v=>console.log(`success=>${v}`))
    .catch(e=>console.log(`fail=>${e}`)) 
    //fail=>error

    await命令后面的promise对象如果变成reject状态,reject的方法参数传入了catch的回调里面,此时 整个async函数会中断执行。

    如果想要前一个异步不会影响后面的异步,可以将前一个await放在try...catch里面,这样无论这个异步操作是否成功,第二个异步都会执行。或者在前一个await的promise后面加上catch语句进行捕捉reject信息,也是可以不影响后面await的执行。

    async function myFunction() {
      try {
        await somethingThatReturnsAPromise();
      } catch (err) {
        console.log(err);
      }
    }
    
    // 另一种写法
    
    async function myFunction() {
      await somethingThatReturnsAPromise()
      .catch(function (err) {
        console.log(err);
      });
    }

    注意的另外一点:

    如果两个方法不存在继发关系,即两个独立的异步操作,完全可以让它们同时触发。

    let foo = await getFoo();
    let bar = await getBar();
    
    let [foo,bar] = await Promise.all([getFoo(),getBar()]);

    还有:await命令只能用在async函数里面,用在普通函数中会报错。

    async函数的实现原理:

    就是Generator函数和自动执行器,包装在一个函数里面。主要是这个自动生成器是怎么实现的?

  • 相关阅读:
    koa2 + webpack 热更新
    koa2在node6中如何运行
    浅拷贝和深拷贝的理解和实现
    angular2多组件通信流程图
    angular2 表单的理解
    ssh-add Could not open a connection to your authentication agent.
    outlook同步异常
    ctrl+c ctrl+d ctrl+z 的区别和使用场景
    grep 详解
    mysql 事务隔离级别 详解
  • 原文地址:https://www.cnblogs.com/tangjiao/p/9052342.html
Copyright © 2011-2022 走看看