Promise_async与await

思维小错误

之前有这样一个疑问，我在函数1中使用await等待异步执行，在函数2中调用函数1，那函数2中的同步代码会等待函数1执行完毕再执行吗？

• 如下例：调用listChenge函数，是先打印111呢还是先打印222呢？

  •  async awaitMethod(){
            
          const res = await new Promise((resolve,reject)=>{
            
            setTimeout(()=>{
            
              console.log('111')
              resolve()
            },5000)
          })
          console.log('333')
        },
        listChenge(){
            
          this.awaitMethod()
          console.log('222')
        }
    

• 答案是先打印222，等待5秒打印111,333

• 原因很简单—>await会暂停当前async函数的执行，等待promise执行完毕再执行后面的代码；

• 若是我们想要先打印111，再打印222

  •  async awaitMethod(){
            
          const res = await new Promise((resolve,reject)=>{
            
            setTimeout(()=>{
            
              console.log('111')
              resolve()
            },5000)
          })
          console.log('333')
        },
        async listChenge(){
            
          await this.awaitMethod()
          console.log('222')
        }
    

async与await

由于上面的小错误，再复习一下async与await知识点；

作用

使用async/await可以编写形式同步的代码来处理异步流程；

概念

await

• 注意点：await操作符只能在 async函数中使用，否则会抛出异常；

  • ‘await’ is only allowed within async functions

• 语法：

  • [返回值] = await 表达式
    

  • 表达式可以是一个Promise对象或者任意要等待的值；

    • Promise对象 —> 返回值为Promise的处理结果；

      • resolveAfter2Seconds(x) {
                    
          return new Promise(resolve => {
                    
             setTimeout(() => {
                    
                resolve(x);
             }, 2000);
           });
        },
        async listChenge(){
                    
            const res = await this.resolveAfter2Seconds(1)
            console.log('结果', res) // 1
        }
        

    • 非Promise对象 —> 返回值为值本身

      • async listChenge(){
                    
            const res = await 1
            console.log('结果', res) // 1
        }
        

• await表达式会暂停当前async函数的执行，等待Promise处理完成,再继续执行async函数

  • promise-fulfilled—>继续执行async function;
  • promise-rejected—>将Prmoise的异常原因抛出；

async函数

• 定义：使用async关键字声明的函数被称为async函数；

• 语法：

  • async function 函数名(){}
    

• 返回值

  • 返回一个Promise

    • 若是返回值不是一个promise，async函数将会将值包装为一个Promise

      • async function test(){
                    
          return 222
        }
        
        // 等价于
        async function test(){
                    
          return new Promise(){
                     resolve(222)}
        }
        

    • 若是没有返回值，默认值为undefined

• async与await结合使用

  • async中存在0个或者多个await;
  • await 表达式会暂停整个 async 函数的执行进程并出让其控制权，只有当其等待的基于 promise 的异步操作被兑现或被拒绝之后才会恢复进程。promise 的解决值会被当作该 await 表达式的返回值