js利用递归与promise 按顺序请求数据的方法


Posted in Javascript onAugust 30, 2019

问题:项目中有一个需求,一个tabBar下面如果没有内容就不让该tabBar显示,当然至于有没有内容,需要我们通过请求的来判断,但是由于请求是异步的,如何让请求按照tabBar的顺序进行?

方案:我们可以将promise变成下一个请求,可以利用递归来实现

实施:

//定义初始数据 requestlist就像tabBar列表

  let requestlist = [1, 2, 3, 4, 5, 6, 7,8,9];
  //每个tabBar的返回数据使用reslist装起来
  let reslist = [];
  function startapi() {
    //定义counts,用来收集请求的次数,(也可以用reslist的length进行判断)
    let counts = 0;
    return function apirequest() {
        let arg =arguments[0]
        let a = new Promise((res, rej) => {
          //setTimeout模拟请求到接收的时间需要5秒钟
          setTimeout(function () {
            res('成功返回数据');
          },100)
        })
        //无论成功或者失败都要进行下一次,以免阻塞,成功请求的末尾有s标志,失败的末尾有f标志
        a.then(() => {
         counts++;
          if (counts > requestlist.length) {
            return;
          }
          console.log(counts)
          //1,假设当前请求出错的时候我们认为这不合法,假设此时counts为3
          if(counts==3){
          throw new Error('第三个失败')
          }
          //2,假设当前请求下没有数据的时候我们认为不合法 ,假设此时counts为4
          if(counts==4){
           reslist.push(arg + 'f');
          }
          if(counts!=4){
          reslist.push(arg + 's');
          }
          apirequest(requestlist[counts])
          console.log(reslist)
        }).catch(err => {
        reslist.push(arg + 'f');
        //递归调用
        apirequest(requestlist[counts])
          console.log(err)
        })
    }
  }
  let newapiget = startapi();
  newapiget(requestlist[0])

 最终我们打印结果得到:

 js利用递归与promise 按顺序请求数据的方法

 可以看到第三个和第四个结尾为f

总结

以上所述是小编给大家介绍的js利用递归与promise 按顺序请求数据的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
很多人都是用下面的js刷新站IP和PV
Sep 05 Javascript
jquery中通过父级查找进行定位示例
Jun 28 Javascript
javascript实现当前页导航激活的方法
Feb 27 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
Sep 16 Javascript
JavaScript 性能优化小结
Oct 12 Javascript
jQuery实现简单的DIV拖动效果
Feb 19 Javascript
jQuery图片左右滚动代码 有左右按钮实例
Jun 20 Javascript
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
webpack实用小功能介绍
Jan 02 Javascript
node中的session的具体使用
Sep 14 Javascript
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 jQuery
js实现带有动画的返回顶部
Aug 09 Javascript
Vue-CLI 项目在pycharm中配置方法
Aug 30 #Javascript
JS实现页面跳转与刷新的方法汇总
Aug 30 #Javascript
Vue 动态组件components和v-once指令的实现
Aug 30 #Javascript
java实现单链表增删改查的实例代码详解
Aug 30 #Javascript
vuex vue简单使用知识点总结
Aug 29 #Javascript
js中的this的指向问题详解
Aug 29 #Javascript
Node4-5静态资源服务器实战以及优化压缩文件实例内容
Aug 29 #Javascript
You might like
PHP使用ob_start生成html页面的方法
2014/11/07 PHP
Yii配置文件用法详解
2014/12/04 PHP
用Javascript数组处理多个字符串的连接问题
2009/08/20 Javascript
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
2011/03/05 Javascript
Extjs EditorGridPanel中ComboBox列的显示问题
2011/07/04 Javascript
window.parent与window.openner区别介绍
2012/04/12 Javascript
js arguments对象应用介绍
2012/11/28 Javascript
扩展JS Date对象时间格式化功能的小例子
2013/12/02 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
2014/04/02 Javascript
jquery文本框中的事件应用以输入邮箱为例
2014/05/06 Javascript
javascript实现自动填写表单实例简析
2015/12/02 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
2016/06/12 Javascript
Node.js批量给图片加水印的方法
2016/11/15 Javascript
jQuery实现的淡入淡出与滑入滑出效果示例
2018/04/18 jQuery
使用post方法实现json往返传输数据的方法
2019/03/30 Javascript
node基于async/await对mysql进行封装
2019/06/20 Javascript
layui多图上传实现删除功能的例子
2019/09/23 Javascript
wxpython实现图书管理系统
2018/03/12 Python
python3 tkinter实现添加图片和文本
2019/11/26 Python
Python 利用Entrez库筛选下载PubMed文献摘要的示例
2020/11/24 Python
详解CSS3中border-image的使用
2015/07/18 HTML / CSS
利用html5 file api读取本地文件示例(如图片、PDF等)
2018/03/07 HTML / CSS
HTML5样式控制示例代码
2013/11/27 HTML / CSS
土耳其家居建材网站:Koçtaş
2016/11/22 全球购物
英国花园药房: The Garden Pharmacy
2017/12/28 全球购物
Lentiamo丹麦:购买便宜的隐形眼镜
2021/01/13 全球购物
Final类有什么特点
2012/04/25 面试题
《自然之道》教学反思
2014/02/11 职场文书
高中运动会入场词
2014/02/14 职场文书
城管综合整治方案
2014/05/01 职场文书
企业年度评优方案
2014/06/02 职场文书
电工实训报告总结
2014/11/05 职场文书
2014年助理政工师工作总结
2014/12/19 职场文书
小学五年级语文上册教学计划
2015/01/22 职场文书
反腐倡廉观后感
2015/06/08 职场文书
检讨书之工作不认真
2019/08/14 职场文书