美文网首页
async/await

async/await

作者: zdxhxh | 来源:发表于2019-11-05 09:43 被阅读0次

    async 函数

    ES7 标准引入了 async 函数,使得异步操作变得更加方便。

    它是 Generator 函数的语法糖。

    与generator与co的不同

    • 内置执行器
    • 更好的语义
    • co yield后面只能是promise或thunk函数,而async函数 的 await命令后面可以是原始类型的值(会自动转化为resolve的promise对象)

    1. 返回promise对象

    使用async命令的函数,可以返回一个promise对象

    async function es6() { 
    
    }
    es6().then(data=> { 
    
    })
    

    async 的内部机制我猜是这样的

    function async(fn) { 
      return new Promise(resolve=> { 
        resolve(fn())
      })
    }
    

    2. 错误处理

    很多人不知道async函数里面的错误处理,因为没有reject,其实直接抛出异常就可以了

    async function es6() {
        throw new Error('出错了')
    }
    es6().catch(err => {
        console.log(err)
    }).finally(() => {
        console.log("错误被捕获了")
    })
    

    3. then的执行时机

    我们都知道,async的then是等到它里面的await全部执行完才执行

    async function es6() {
        let res1 = await api1()
      let res2 = await api2()
      return { res1,res2 }
    }
    es6().then(({res1,res2})=> { 
      console.log(res1,res2)
    })
    

    4. await

    await 后面可以跟一个promise对象,返回resolve的结果,也可以是基本类型,直接返回

    async function es6() { 
      return await 123;
    }
    

    错误处理

    async function es6() { 
      return await Promise.reject('出错了').catch(e=> {console.log(e)});
    }
    

    5. async是如何编译成generator的 ?

    首先,我不需要知道他是如何编译成generator的,我只需要知道generator编译成promise的过程就可以了

    所以殊途同归,我只需要知道它是如何编译成promise就可以了.

    async function es() { 
      // 第1段 start 
      const res1 = await api()  // 第1段 end 
      // 第2段 start 
      console.log(res)
      const res2 = await api()  // 第2段 end 
      // 第3段 start
      console.log(res2)         // 第3段 end 
    }
    

    编译成promise

    function es() { 
      new Promise(function excutor(resolve,reject){
        const promise1 = api()
        promise1.then(value=> { 
          const res1 = value 
          console.log(res)
    
          const promise2 = api() 
          promise2.then(value=> { 
            const res2 = value 
            console.log(res2)
            const { value, done } = return 
            because done === true resolve(value)
          },reject)
        },reject)
      })
    }
    

    再来看,普通函数

    async function es6() { 
      return { value:222333 }
    }
    
    function es6() { 
      new Promise(function excutor(resolve,reject){
      const { done,value } = return {value : 222333}
        because done === true ; resolve(value)
      })
    }
    

    相关文章

      网友评论

          本文标题:async/await

          本文链接:https://www.haomeiwen.com/subject/gqcsbctx.html