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

2019-07-14 admin

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

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 {<pending>}
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://segmentfault.com/a/1190000019757257

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-69747.html

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

相关文章
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
零基础-5小时开发一个electron应用-[实践]
一、背景 三、技能升级 ​ 明明可以用颜值取胜,非要靠才华?不对,明明可以用代码搞定,非要搞设计?步入正题,正好最近对electron比较感兴趣,又是要做工具,那就直接怼 1.electron介绍 ​ electron最开始不叫这个名字,叫...
2017-12-26
javaScript+turn.js实现图书翻页效果实例代码
为了实现图书翻页的效果我们在网上可以看到很多教程 在这里推荐turn.js 网上的turn.js 有api 不过是英文的  很多人看起来不方便 .关于代码也是奇形怪状在这里我将详细讲解如何使用turn.js实现翻页效果 ,本篇文章只是讲解 ...
2017-03-16
如何为高负载网络优化Nginx 和 Node.js?
译者:AlfredCheung 在搭建高吞吐量web应用这个议题上,NginX和Node.js可谓是天生一对。他们都是基于事件驱动模型而设计,可以轻易突破Apache等传统web服务器的C10K瓶颈。预设的配置已经可以获得很高的并发,不过,...
2015-11-12
js实现手机拍照上传功能
在前段时间的项目开发中,用到了拍照上传的地方,后来发现了最为简单的一种方法,现总结如下: &lt;form id=&quot;form&quot; method=&quot;post&quot; action=&quot;http:&#x2...
2017-03-06
7个提高效率的JavaScript调试工具
鐜板湪鐨凧avaScript浜嬪疄涓婂凡鐒舵垚涓轰簡娴佽�岀殑web璇�瑷€锛屽嵆浣垮畠骞朵笉瀹岀編銆傚緢澶氱▼搴忓憳涓嶅枩娆㈢敤JavaScript鍐欎唬鐮侊紝鏄�鍥犱负鍐欏埌鍚庢潵鎬讳細鍑虹幇鍚勭�嶈帿鍚嶅叾濡欑殑bug锛岃€屼笖鍦ㄥ紑...
2015-11-11
纯JS实现旋转图片3D展示效果
CSS: &lt;style type=&quot;text&#x2F;css&quot;&gt; #show{position:relative;margin:20px auto;width:800px;} .item{position:...
2017-03-22
7个让JavaScript变得更好的注意事项
随着浏览器性能提高,伴随着新的HTML5的编程接口的稳步采用,网页上的JavaScript的音量在逐渐增加。然而,一个写得不好的程序编码却拥有着打破整个网站,让用户为之沮丧和驱赶潜在客户的潜力。 开发人员必须使用所有供他们任意使用的工具和技...
2015-11-12
js实现鼠标左右移动,图片也跟着移动效果
效果:鼠标往左移,图片对应右移,鼠标往右移,图片就左移动。图片距离越远偏移距离越大。 思路:首先获取图片原先的距离。设置一个变化值,图片的最终距离等于原先的距离加上变化值 布局:大盒子里面是图片,大盒子position:relative;图...
2017-02-17
如何编写干净高效的CSS代码
其实CSS的学习并不困难,但在一些较为大型的项目中就显得杂乱无章,变得很难管理,尤其是不同的人编写CSS的风格总会略有不同,从团队合作的层面上来说,就更加难以沟通,所以,我们为此总结了一些如何实现高效整洁的CSS代码原则: 使用Reset但...
2015-11-12
回到顶部