asyncawait

Posted 2021-06-20 某某雅

通过定时器实现间隔一秒输出1，在间隔一秒输出2
第一种通过定时器方式实现这个需求

       setTimeout(()=>{
         console.log(1);
         setTimeout(()=>{
         console.log(2);
        },1000)
      },1000)

另一种通过promise来实现

     let promise1 = new Promise((resolve,reject)=>{
        setTimeout(()=>{
           resolve(1)
        },1000)
     }).then(res=>{
        console.log(res);
        return new Promise((resolve,reject)=>{
          setTimeout(()=>{
            resolve(2)
         },1000)
      })
    }).then(res=>{
      console.log(res);
   })

以上两种方式都需要嵌套，写起来比较麻烦，还有一种比较简洁的写法利用async和await来实现它

什么是async和await

它们是基于promises的语法糖，使异步代码更易于编写和阅读。通过使用它们，异步代码看起来更像是老式同步代码，因此它们非常值得学习。

async关键字

我们使用 async 关键字，把它放在函数声明之前，使其成为 async function。

     //一个普通函数hello()
    function hello(){
       return \'hello!\';
    }
   hello();  //该函数会返回hello！

将这个函数变成异步函数

   async function hello(){
         return \'hello!\'
      }
    hello();

现在调用该函数会返回一个 promise。这是异步函数的特征之一 —— 它保证函数的返回值为 promise。

await关键字

当 await 关键字与异步函数一起使用时，它的真正优势就变得明显了 —— 事实上， await 只在异步函数里面才起作用。它可以放在任何异步的，基于 promise 的函数之前。它会暂停代码在该行上，直到 promise 完成，然后返回结果值。在暂停的同时，其他正在等待执行的代码就有机会执行了。

  async function hello() {
      return greeting = await Promise.resolve("Hello");
    };
   hello().then(alert);

最开始提到的需求通过async和await实现的代码

  async function func(){
    let res;
    res = await new Promise((resolve)=>{ //用await来修饰的异步函数，可以简单地理解为把一个异步函数修饰为同步效果，但是这个函数还是异步函数
       setTimeout(()=>{
           resolve(1)
       },1000)
    })
    console.log(res)
    res = await new Promise((resolve)=>{
       setTimeout(()=>{
           resolve(2)
       },1000)
    })
    console.log(res)
}
func();