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操作图片(增,删,改) 例子
Apr 17 Javascript
你必须知道的Javascript知识点之"this指针"的应用
Apr 23 Javascript
使用Java实现简单的server/client回显功能的方法介绍
May 03 Javascript
JavaScript的设计模式经典之建造者模式
Feb 24 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
Jun 08 Javascript
js操作DOM--添加、删除节点的简单实例
Jul 08 Javascript
javascript回到顶部特效
Jul 30 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
Aug 24 Javascript
AngularJs 指令详解及示例代码
Sep 01 Javascript
JavaScript装饰器函数(Decorator)实例详解
Mar 30 Javascript
详解vue-cli + webpack 多页面实例配置优化方法
Jul 13 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
Apr 01 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实现mysql数据库备份类
2008/03/20 PHP
仿dedecms下拉分页样式修改的thinkphp分页类实例
2014/10/30 PHP
Yii2实现同时搜索多个字段的方法
2016/08/10 PHP
php readfile下载大文件失败的解决方法
2017/05/22 PHP
XHTML-Strict 内允许出现的标签
2006/12/11 Javascript
收藏Javascript中常用的55个经典技巧
2007/08/12 Javascript
JS应用之禁止抓屏、复制、打印
2008/02/21 Javascript
Javascript下判断是否为闰年的Datetime包
2010/10/26 Javascript
最新28个很棒的jQuery 教程
2011/05/28 Javascript
Js四则运算函数代码
2012/07/21 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
2016/07/01 Javascript
详解RequireJS按需加载样式文件
2017/04/12 Javascript
JS匹配日期和时间的正则表达式示例
2017/05/12 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
2018/01/08 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
2018/01/31 Javascript
WebSocket的通信过程与实现方法详解
2018/04/29 Javascript
脚手架vue-cli工程webpack的作用和特点
2018/09/29 Javascript
jQuery-ui插件sortable实现自由拖动排序
2018/12/01 jQuery
Vue封装Axios请求和拦截器的步骤
2020/09/16 Javascript
[14:21]VICI vs EG (BO3)
2018/06/07 DOTA
Pyhton中防止SQL注入的方法
2015/02/05 Python
Python实现选择排序
2017/06/04 Python
tensorflow saver 保存和恢复指定 tensor的实例讲解
2018/07/26 Python
Python面向对象之类和实例用法分析
2019/06/08 Python
pycharm不以pytest方式运行,想要切换回普通模式运行的操作
2020/09/01 Python
Python爬虫之Selenium实现关闭浏览器
2020/12/04 Python
Python图像处理之膨胀与腐蚀的操作
2021/02/07 Python
浅谈css3中的前缀
2016/07/20 HTML / CSS
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
2012/12/13 HTML / CSS
世界上最大的家庭自动化公司:Smarthome
2017/12/20 全球购物
幼儿园秋游活动方案
2014/01/21 职场文书
职工运动会感言
2014/02/07 职场文书
幼儿园教师工作总结2015
2015/04/02 职场文书
电影雷锋观后感
2015/06/10 职场文书
2016年教师反腐倡廉心得体会
2016/01/13 职场文书
详解Java实践之抽象工厂模式
2021/06/18 Java/Android