美文网首页
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

    浅谈Async/Await用 async/await 来处理异步 async和await async:声明一个异步...

  • ES8(一) —— async&await

    目录 async和普通函数的区别 await async/await处理多回调异步 async和await必须配合...

  • async

    async/await特点 async/await更加语义化,async是“异步”的简写,async functi...

  • ES6中的好东西

    1 Await/Async 前端的回调时代我没有赶上,我赶上的是await/async时代。await和async...

  • Vue接口调用方式(三)async/await用法

    async/await用法 1. async/await的基本用法 async/await是ES7引入的新语法,可...

  • nodejs async 使用简介

    async await node async 使用

  • JS 中的 async/await

    async/await 是什么? async/await 是 ES2017 中新增的异步解决方案; await 只...

  • ES2017 async 函数

    async 和 await 在干什么 每个名称都有意义async : 异步await: async wait简...

  • async/await

    async/await async/await 是Generator的语法糖。 Generator 通过将Gene...

  • 小程序-云开发

    async和await async:异步(无等待)await:等待(是为了同步) 一、await 关键字只在 as...

网友评论

      本文标题:async/await

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