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 相关文章推荐
基于JQuery的模拟苹果桌面Dock效果(稳定版)
Oct 15 Javascript
获取内联和链接中的样式(js代码)
Apr 11 Javascript
json数据的列循环示例
Sep 06 Javascript
setTimeout和setInterval的深入理解
Nov 08 Javascript
text-align:justify实现文本两端对齐 兼容IE
Aug 19 Javascript
js窗口关闭提示信息(兼容IE和firefox)
Oct 23 Javascript
Vue.js自定义事件的表单输入组件方法
Mar 08 Javascript
vue左右侧联动滚动的实现代码
Jun 06 Javascript
vue移动端微信授权登录插件封装的实例
Aug 28 Javascript
vue prop属性传值与传引用示例
Nov 13 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
Apr 13 Javascript
express异步函数异常捕获示例详解
Nov 30 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
简单实用的.net DataTable导出Execl
2013/10/28 PHP
PHP实现搜索时记住状态的方法示例
2018/05/11 PHP
PHP实现页面静态化深入讲解
2021/03/04 PHP
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
2012/01/15 Javascript
jQuery+css+html实现页面遮罩弹出框
2013/03/21 Javascript
JS:window.onload的使用介绍
2013/11/13 Javascript
Asp.Net alert弹出提示信息的几种方法总结
2014/01/29 Javascript
javascript实现存储hmtl字符串示例
2014/04/25 Javascript
javascript 控制input只允许输入的各种指定内容
2014/06/19 Javascript
javascript实现切换td中的值
2014/12/05 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
2016/09/26 Javascript
js返回顶部实例分享
2016/12/21 Javascript
微信小程序实现页面浮动导航
2019/01/28 Javascript
jQuery实现的图片点击放大缩小功能案例
2020/01/02 jQuery
element-ui树形控件后台返回的数据+生成组织树的工具类
2020/03/05 Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
2020/05/30 jQuery
python实现带验证码网站的自动登陆实现代码
2015/01/12 Python
剖析Django中模版标签的解析与参数传递
2015/07/21 Python
Python装饰器基础详解
2016/03/09 Python
Python基于回溯法子集树模板解决m着色问题示例
2017/09/07 Python
Python3 模块、包调用&路径详解
2017/10/25 Python
python实现websocket的客户端压力测试
2019/06/25 Python
Python爬取爱奇艺电影信息代码实例
2019/11/26 Python
浅谈Django前端后端值传递问题
2020/07/15 Python
Python制作运行进度条的实现效果(代码运行不无聊)
2021/02/24 Python
在线服装零售商:SheIn
2016/07/22 全球购物
PacSun官网:加州生活方式服装、鞋子和配饰
2018/03/10 全球购物
Saks Fifth Avenue澳洲/亚太地区:萨克斯第五大道精品百货店
2019/06/09 全球购物
Onzie官网:美国时尚瑜伽品牌
2019/08/21 全球购物
房地产资料员岗位职责
2014/07/02 职场文书
财务出纳岗位职责
2015/03/31 职场文书
信仰纪录片观后感
2015/06/08 职场文书
运动员加油词
2015/07/18 职场文书
驾驶员管理制度范本
2015/08/06 职场文书
《秋天的雨》教学反思
2016/02/19 职场文书
Java Lambda表达式常用的函数式接口
2022/04/07 Java/Android