资讯专栏INFORMATION COLUMN

如何优雅的实现多个接口并发?且监听最终结果

shiweifu / 2271人阅读

摘要:相信大家工作中调用接口的情况很常见,有时候会有这样的需求进入页面需要多个接口调用结束后,才能让用户进行操作而这几个接口本身并没有先后顺序的要求。最终判断所有变量值都为。

相信大家工作中调用接口的情况很常见,有时候会有这样的需求:进入页面需要多个接口调用结束后,才能让用户进行操作!而这几个接口本身并没有先后顺序的要求。你会怎么做?

1、储存变量方法

因为接口调用是异步行为,所以我们可以在调用成功的回调函数中标记不同的变量(默认值都设置为false),等到当前接口完的时候,会把当前变量设置为true。最终判断所有变量值都为true。很明显这样会需要很多全局变量,而且很复杂。所以不推荐使用。

ES6 promise方法

我们都知道使用fetch调用接口会返回一个Promise实例,因此我们模拟一个Promise异步返回:

const wait = ms => new Promise((resolve, reject) => {
  setTimeout(() => {
      console.log(`wait ${ms}ms`)
      resolve(`wait ${ms}ms`)
  }, ms)
})

const PA = Promise.all([wait(3000), wait(1000), wait(2000)])
// 依次打印:wait 1000ms wait 2000ms wait 3000ms
//PA => Promise {}
PA.then(res => console.log(res))

通过上面Promise.all执行结果可以看出来,返回了一个新的Promise实例,可以通过.then回调处理,但是看起也是不太优雅!

配合ES7 async/await方法

ES7为处理异步方法提供Generator的语法糖写法async/await方法。

但是,如果仅仅使用await的方法,接口会被阻塞,即执行顺序变成了同步的效果了;所以,通过await + Promise的方法写起来十分优雅、简洁。

const wait = ms => new Promise((resolve, reject) => {
  setTimeout(() => {
      console.log(`wait ${ms}ms`)
      resolve(`wait ${ms}ms`)
  }, ms)
})
;(async () => {
  const PA = await Promise.all([wait(3000), wait(1000), wait(2000)])
  // 依次打印:wait 1000ms wait 2000ms wait 3000ms
  console.log(PA)
})()

//wait 1000ms 
//wait 2000ms 
//wait 3000ms 
//["wait 3000ms", "wait 1000ms", "wait 2000ms"]

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

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

相关文章

  • 函数式编程与面向对象编程[5]:编程本质

    摘要:函数式编程与面向对象编程编程的本质之剑目录编程的本质读到两篇文章写的不错综合摘录一下复合是编程的本质函数式程序员在洞察问题方面会遵循一个奇特的路线。在面向对象编程中,类或接口的声明就是表面。 函数式编程与面向对象编程[5]:编程的本质 之剑 2016.5.6 01:26:31 编程的本质 读到两篇文章,写的不错, 综合摘录一下 复合是编程的本质 函数式程序员在洞察问题方面会遵循...

    miracledan 评论0 收藏0
  • 0011 - YARN核心设计解析

    摘要:包括等,它们共同维护了一个事件与事件处理器的映射表,用来处理各个事件。例如内部包含一个中央异步调度器,并注册了等一系列事件事件处理器,由中央异步调度器统一管理和调度。当状态机转换到最终状态时,则退出。 大数据梦工厂( 0011 - YARN核心设计解析)1 - YARN RPC架构设计YARN RPC Serv...

    KoreyLee 评论0 收藏0
  • 《Node.js设计模式》使用流进行编码

    摘要:如何创建并使用。正如我们所预料到的那样,使用来进行大文件的读取显然是错误的。使用进行压缩文件我们必须修复我们的应用程序,并使其处理大文件的最简单方法是使用的。确切地说,由返回的流。 本系列文章为《Node.js Design Patterns Second Edition》的原文翻译和读书笔记,在GitHub连载更新,同步翻译版链接。 欢迎关注我的专栏,之后的博文将在专栏同步: En...

    xinhaip 评论0 收藏0
  • 入门架构——单机高性能

    摘要:协作方式在高并发场景中,必须要让服务器同时维护大量请求连接,可能是一个服务进程创建另一个进程,也可能是一个服务线程去创建另一个线程,但连接结束后进程或线程就销毁了,这是一个巨大的浪费一个自然的想法就是通过创建一个进程线程池从而达到资源复用, showImg(https://segmentfault.com/img/bVbtgn1?w=313&h=208); 协作方式 在高并发场景中,必...

    UCloud 评论0 收藏0
  • 现代软件开发流程-by 12-Factor

    摘要:将开发环境和生产环境的差异降至最低,并使用持续交付实施敏捷开发。可以在工具架构和开发流程不发生明显变化的前提下实现扩展。我们的初衷是分享在现代软件开发过程中发现的一些系统性问题,并加深对这些问题的认识。 简介 如今,软件通常会作为一种服务来交付,它们被称为网络应用程序,或软件即服务(SaaS)。12-Factor 为构建如下的 SaaS 应用提供了方法论: 使用标准化流程自动配置,从...

    draveness 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<