【JavaScript】异步的终极方案async，await

悠悠 2022-03-10 18:38 155阅读 0赞

看一个最简单例子：

function x() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve('hello js')
        }, 3000)
      })
    }
    async function test() {
      let n = await x()
      console.log(n)
      console.log('hello world')
    }
    test()

![在这里插入图片描述][20190311163530142.png]  
await后面必须跟一个返回promise的函数  
这个代码块必须用async关键字声明

那如何捕捉promise里面失败呢？  
用 try catch

function x() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          reject('出错啦')
        }, 3000)
      })
    }
    async function test() {
      try {
        let n = await x()
        console.log(n)
      } catch(err) {
        console.log(err)
      }
     
      console.log('hello world')
    }
    test()

![在这里插入图片描述][20190311164447296.png]  
那么如何在async函数里面使用多个异步呢？还是要用到promise

function x() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve('hello')
        }, 3000)
      })
    }
    
    async function test() {
      try {
        let n = await Promise.all([x(), x()])
        console.log(n)
      } catch(err) {
        console.log(err)
      }
     
      console.log('hello world')
    }
    test()

![在这里插入图片描述][20190311165824717.png]  
总结：  
1，使用async function声明一个一步函数  
2，await关键字后面跟一个promise函数  
3，await 关键字仅仅在 async function中有效  
4，这个async function返回的也是一个promise

[20190311163530142.png]: /images/20220310/f89fe0237c1f468bae943d54c065369d.png
[20190311164447296.png]: /images/20220310/418981a57ed34f0ab6229574218ed79f.png
[20190311165824717.png]: /images/20220310/dc8e1a4854a34b76825638a6aadef982.png