异步函数,async,await那些你忽略的进程

时间:2021-1-8 作者:admin

异步函数

  • 异步函数,也称为async/await(语法关键字),是es6promise在JS函数中的应用,这个特性从行为和语法上都增强了JS,让以同步方式写的代码能够异步执行

例子1:这个期约在超时之后会解决为一个值,如果程序中其他代码要访问这个值,则需要一个解决处理函数

let p = new Promise((resolve, reject) => 
setTimeout(resolve, 1000, 3)); 
p.then((x) => console.log(x)); // 3

async

  • async关键字用于声明异步函数,这个关键之可以用在函数声明,函数表达式,箭头函数和方法上,这个关键字可以让函数具有异步的特性,但总体上代码任然是同步求值得,在参数和闭包方面,异步函数任然具有普通JS函数的正常行为
async function foo() {
            console.log(1);
            return 3;
        } // 给返回的期约添加一个解决处理程序
        foo().then(console.log);
        console.log(4);
        console.log(5); // 1 ,4 ,5 , 3

小结:在异步函数如果使用了return返回了值,这个值会被promise.resolve()包装成一个期约函数,异步函数始终返回期约对象,在函数外部调用可以得到他返回的期约

  • 异步函数的返回值期待一个thenable接口的对象,这个对象可以提供给then()的处理程序解包,如果不是,就会被当做已经解决期约结果
  // 返回一个没有实现thenable接口的对象
        async function bar() {
            return ['bar'];
        }
        bar().then(console.log); // ['bar']
// 返回一个实现了thenable接口的非期约对象
        async function baz() {
            const thenable = {
                then(callback) {
                    callback('baz');
                }
            };
            return thenable;
        }
        baz().then(console.log); // baz
  // 返回一个期约
        async function qux() {
            return Promise.resolve('qux');
        }
        qux().then(console.log); // qux

小结:异步函数返回值,含thenable则提供then的处理程序解包,否则把返回值当期约处理结果,但是要注意,拒绝期约的错误不会被异步函数捕获

   async function foo() {
            console.log(1);
            Promise.reject(3);
        }
        // Attach a rejected handler to the returned promise 
        foo().catch(console.log);
        console.log(2);
        // 1
        // 2 
        // Uncaught (in promise): 3

await

  • 因为异步函数主要针对不会马上完成的任务,所以需要一种暂停和恢复执行的能力,使用await可以暂停异步函数的代码执行,等待期约解决
//异步写法
  let p = new Promise((resolve, reject) => 
        setTimeout(resolve, 1000, 3));
        p.then((x) => console.log(x)); // 3
//async写法
   async function foo() {
            let p = new Promise((resolve, reject) => 
            setTimeout(resolve, 1000, 3));
            console.log(await p);
        }

小结:await关键字会暂停执行异步函数后面的代码,让出JS运行时的执行线程,这个行为和生成器中的yield关键字一样,await关键字同样是尝试解包对象的值,然后将这个值传达给表达式,,再异步恢复异步函数的执行

接下来看一个涉及停止与恢复执行的例子:这个例子非常有意思,虽然现在你看不到这种效果,但是能更直白帮你理解await

  • 为了更好的理解这个例子,首先要知道这几个问题

    • await的地方,等于局部暂停,等待返回值,继续其他线程

    • 同样的await按照先后顺序从上往下

    • 当await有多个进程以后,会按照多列顺序执行

      例子1:

async function foo() {
            console.log(await Promise.resolve('foo'));
        }
        async function bar() {
            console.log(await 'bar');
        }
        async function baz() {
            console.log('baz');
        }
        foo();
        bar();
        baz(); 
        // baz // bar // foo

小结:正常情况是这个顺序,但是你在浏览器跑的时候,结果bar和foo的值会调换位子

首先我们说一下执行原理:

  • foo()调用时,foo在消息队列添加两列进程,第一列等待返回值,第二列拿到返回值后执行的进程,
  • 然后继续bar()这时候在消息队列第一列添加一个进程,这时候执行baz,直接打印出‘baz’,
  • 然后开始消息队列进程,foo第一列期约得出结果拿到返回值,然后继续bar的消息队列第一列进程,这时候打印出’bar’,这时候消息队列第一列进程全部执行完毕,
  • 进入第二列,foo用第一列进程拿到的返回值执行进程,打印foo,

其次我们说一下为什么浏览器的结果不是这样:1TC39 对 await 后面是期约的情况如何处理做过一次修改。修改后,本例中的 foo()里的await Promise.resolve(’foo‘)只会生成一个异步任务。所以他执行的时候没有两列,只有一列,所以会按await顺序排列

  • 按照上面理解,我们来看最终的一个例子
 async function foo() {
            console.log(2);
            console.log(await Promise.resolve(8));
            console.log(9);
        }
        async function bar() {
            console.log(4);
            console.log(await 6);
            console.log(7);
        }
        console.log(1);
        foo();
        console.log(3);
        bar();
        console.log(5);
        // 1 // 2 // 3 // 4 // 5 //8 // 9 // 6// 7

小结:上面显示的最新修改过后的结果,按照原结果进程应该是

  • 打印1,运行foo,打印2,消息队列加入两列,打印3,运行bar,打印4,消息队列加一列进程,打印5,开始执行消息队列第一行,foo拿到返回值,bar打印6,然后打印7,回到foo第二列,打印结果8,再打印9

本文使用 mdnice 排版

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。