async & await & promise

Dean 发布于2019-08-22 17:31 / 3285人阅读

摘要：最近项目中用的比较多，所以特地去了解，模仿一下实现先来看看使用的方法通过是通过使用生成器配合方法模拟的一个同步操作，这个技术有效的避免了传统回调和形成的回调地狱。

最近项目中 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的方法可以更好的解决异步流程~如果有什么不对的地方，盼望您能底部留言，感激不尽~

海外云主机服务器托管 async await await-async async-await asp &amp&amp逻辑

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95248.html

Promise &amp;&amp; async/await的理解和用法

摘要：但是中的这种情况与抽象反应器模式如何描述完全不同。在处理一个阶段之后并且在移到下一个队列之前，事件循环将处理两个中间队列，直到中间队列中没有剩余的项目。如果没有任务则循环退出，每一次队列处理都被视为事件循环的一个阶段。 Promise && async/await的理解和用法为什么需要promise（承诺）这个东西在之前我们处理异步函数都是用回调这个方法，回调嵌套的时候会发现阅读...

王笑朝 2019-08-26 12:17 评论0 收藏0
async &amp; await (译)

摘要：的出现，让我们可以走出回调地狱，着实惊艳。我已经开始使用里的和关键字来简化的处理。异步任务在这个例子是执行之后，一直在执行完成才继续下一个任务并没有产生阻塞。最后这个函数处理了返回值并且返回了一个对象。依然很棒，但和使得它可维护性更好。 JavaScript Promises的出现，让我们可以走出回调地狱，着实惊艳。Promises 允许我们更好的引入和处理异步任务，虽然如此，但引入好...

The question 2019-08-22 11:07 评论0 收藏0
async/await 和 Promise 的用例&amp;关系

摘要：和的关系和的关系非常的巧妙，必须在内使用，并装饰一个对象，返回的也是一个对象。的会使得的代码节点自动抛出相应的异常，终止向下继续执行。示例方法内无节点没有修饰的方法内有节点注意内的对节点的作用。假设我们有三个请求，req1，req2, req3，三个请求后者依赖前者的请求结果。我们先使用Promise封装一个异步请求的方法。 Promise 异步请求使用Promise可以非常容易的...

y1chuan 2019-08-26 18:37 评论0 收藏0
ES6&amp;ES7中的异步之async函数

摘要：更好的语义和分别表示异步和等待，比起和更容易理解。前边声明关键字，表示内部有内部操作，调用函数会返回一个对象。等价于其中函数就是自动执行器。 async函数定义 async函数其实就是之前说过的Generator的语法糖，用于实现异步操作。它是ES2017的新标准。读取两个文件: const fs = require(fs) const readFile = function(f...

dongxiawu 2019-08-21 17:36 评论0 收藏0
详解JS前端并发多个相同的请求控制为只发一个请求方式

　　描述如下　　我们要同时发多个相同的请求，第一个请求成功后，剩余结果都不会发出，返回结果是成果。　　假如第一个反馈失败，第二个是成功，后面就不会发出，后面都直接反馈成功。第三个才是成功的话，后面就不会在发出，后面都反馈成功。依次如此处理，直至最后一个。　　　　并发：一个接口请求还处于pending，短时间内就发送相同的请求　　asyncfunctionfetchData(a){ 　　const...

3403771864 2022-10-16 16:39 评论0 收藏0