async & await & promise

最近项目中 asyn & await 用的比较多,所以特地去了解,模仿一下实现~

先来看看 使用 async & await 的方法

async function d () {
  try {
    const a = await Promise((resolve, reject) => {
        setTimeout(reject, 2000 + Math.random() * 3000)
        setTimeout(resolve, 2000 + Math.random() * 3000)
    })
    console.log(a)
  } catch (e) {
    console.log(e)
  }
}

d()

通过 async 是通过使用生成器配合yield方法模拟的一个同步JS操作,这个技术有效的避免了传统回调和promise形成的回调地狱~。async必须用在函数上,使用方法如上。在需要停止的地方加上 await 关键字,结果会根据promise的决议来决定,如果是resolve那么就会继续执行下去,否则会抛出异常,可以由try & catch捕捉。

下面是模拟async & await 的实现方法的demo

void function () {
    function *p () {
      try {
        const a = yield new Promise((resolve, reject) => {
          setTimeout(reject, 2000 + Math.random() * 3000)
          setTimeout(resolve, 2000 + Math.random() * 3000)
        })
        if (a instanceof Error) throw a
        console.log('success', a)
      } catch (e) {
        console.log('error ', e)
      }
    }
    // 执行 p 生成器
    let c = p()
    // 执行 each 遍历生成器所有 yield
    function each (res) {
      // 执行第一个 yield
      const r = c.next(res)
      // 如果还有后续 等待 then 方法回调  继续执行 遍历
      if (!r.done) {
        r.value.then(res=>{
          each(res)
        }).catch(e=>{
          // 如果报错 则返回 错误信息
          each(new Error(e))
        })
      }
    }
    each()
}()

生成器概念请点这里

通过生成器和promise配合可以在then回调的时候继续执行函数。c.next()执行后在第一个yield地方停顿并且返回yield后面的Promise,如果返回的done是true则代表函数执行结束,否则就监听then方法回调。然后递归调用自身一路next直到done为true~

总结一下

async & await是同步执行异步流程的解决方案,这个方案和Promise是紧密结合的,是基于Promise的一层封装。所以配合Promise的方法可以更好的解决异步流程~如果有什么不对的地方,盼望您能底部留言,感激不尽~

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Promiseasyncawait都是JavaScript中处理异步操作的方法。 Promise是一种用于处理异步操作的对象,它可以表示一个异步操作的最终完成或失败,并返回相应的结果。Promise提供了一系列的方法,如resolve()、reject()、then()、catch()、all()和race()等等,用于处理异步操作的状态和结果。 async/await是JavaScript中处理异步操作的一种语法糖,它可以让异步代码看起来更像同步代码,更易于理解和编写。async用于声明一个函数是异步的,而await用于等待一个异步方法执行完成。使用async/await可以在函数内部直接使用await关键字来等待一个Promise对象的结果,而不需要使用then()和catch()方法来处理回调。 实际上,Promiseasync/await在处理异步操作上的结果是一样的,只是async/await更加直观和易于理解。 如果你想更深入地了解异步解决方案,可以参考「硬核JS」深入了解异步解决方案的文档。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [Promiseasync/await的理解](https://blog.csdn.net/qq_44738313/article/details/125659225)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值