es8 异步函数async/await


异步函数

async/await 是ES8新增的两个函数关键字,让以同步方式写的代码能够异步执行

1. async

async关键字用于声明异步函数,这个关键字可以用在函数声明、函数表达式、箭头函数和方法前

    async function f() {
    
    
        return 1;
    }

如果异步函数用return返回了值(如果没有return则会返回undefined),这个值会被自动包装在一个resolved的Promise中,result为该值

    async function f() {
    
    
        return 1;
    }
    f().then(console.log); // 1

async确保函数返回一个Promise,同时也将非Promise的值包装进去

2. await

await只在async函数内工作,该关键字可以暂停异步函数代码的执行,等待Promise解决

    async function f() {
    
    

        let promise = new Promise((resolve, reject) => {
    
    
            setTimeout(() => resolve("done!"), 1000)
        });
        let p = await promise;  // 暂停
        console.log(p); // 一秒后 "done!";
    }
    f();

函数被暂停在了await那一行,直到promise settle时拿到p的值并继续执行
相比于 promise.then,它只是获取 promise 的结果的一个更优雅的语法,同时也更易于读写。
上面的函数可以改写为:

    let promise = new Promise((resolve,reject)=>{
    
    
        setTimeout(()=> resolve("done!"),1000)
    });
    promise.then(console.log);

ps.不能在普通函数中使用 await ,同时不能在顶级上下文如M<script>标签中使用 ,但是可以定义并立即执行异步函数

    (async function f(){
    
    
        console.log(await Promise.resolve(1));
    })();

要完全理解 await 关键字,必须知道它并非只是等待一个值可用那么简单。JavaScript运行时在碰到 await 关键字时,会记录在哪里暂停执行。等到 await 右边的值可用了,JavaScript运行时会向消息队列中推送一个任务,这个任务会恢复异步函数的执行。

    async function foo() {
    
    
        console.log(2);
        await null;
        console.log(4);
    }
    console.log(1);
    foo();
    console.log(3);
    // 1
    // 2
    // 3
    // 4

即使await后跟着立即可用的值,函数之后部分也会被异步求值

总结

异步函数是将期约应用于JavaScript函数的结果。异步函数可以暂停执行,而不阻塞主线程。

函数前面的关键字 async 有两个作用:

  1. 这个函数总是返回一个 promise。
  2. 允许在该函数内使用 await。

Promise 前的关键字 await 使 JavaScript 引擎等待该 promise settle,然后:

  1. 如果有 error,就会抛出异常 — 就像那里调用了 throw error 一样。
  2. 否则,就返回结果。

猜你喜欢

转载自blog.csdn.net/S_aitama/article/details/111146828