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 相关文章推荐
javascript最常用与实用的创建类的代码
Aug 12 Javascript
jQuery实现切换页面布局使用介绍
Oct 09 Javascript
怎么判断js脚本加载完成
Feb 28 Javascript
javascript实现控制的多级下拉菜单
Jul 05 Javascript
Javascript实现的简单右键菜单类
Sep 23 Javascript
JS平滑无缝滚动效果的实现代码
May 06 Javascript
JavaScript中用let语句声明作用域的用法讲解
May 20 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
Feb 27 Javascript
详解angular element()方法使用
Apr 08 Javascript
详解element-ui设置下拉选择切换必填和非必填
Jun 17 Javascript
javascript实现雪花飘落效果
Aug 19 Javascript
js实现星星海特效的示例
Sep 28 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 中执行系统外部命令
2006/10/09 PHP
默默简单的写了一个模板引擎
2007/01/02 PHP
深入Memcache的Session数据的多服务器共享详解
2013/06/13 PHP
解析PHP中的file_get_contents获取远程页面乱码的问题
2013/06/25 PHP
php实现搜索一维数组元素并删除二维数组对应元素的方法
2015/07/06 PHP
php使用FFmpeg接口获取视频的播放时长、码率、缩略图以及创建时间
2016/11/07 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
关于火狐(firefox)及ie下event获取的两种方法
2012/12/27 Javascript
js Calender控件使用详解
2015/01/05 Javascript
JS获取图片lowsrc属性的方法
2015/04/01 Javascript
详解js中==与===的区别
2017/01/08 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
2017/02/12 Javascript
Vue2.x中的父组件传递数据至子组件的方法
2017/05/01 Javascript
vue之数据交互实例代码
2017/06/16 Javascript
微信小程序组件之srcoll-view的详解
2017/10/19 Javascript
JavaScript 中使用 Generator的方法
2017/12/29 Javascript
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
npm 常用命令详解(小结)
2019/01/17 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
2019/10/11 Javascript
JS如何实现手机端输入验证码效果
2020/05/13 Javascript
[01:34]DAC2018主赛事第四日五佳镜头 Gh巨牙海民助Miracle-死里逃生
2018/04/07 DOTA
Python查找函数f(x)=0根的解决方法
2015/05/07 Python
python Socket之客户端和服务端握手详解
2017/09/18 Python
python按行读取文件,去掉每行的换行符\n的实例
2018/04/19 Python
Python使用Pickle库实现读写序列操作示例
2018/06/15 Python
Django中信号signals的简单使用方法
2019/07/04 Python
Python实现TCP探测目标服务路由轨迹的原理与方法详解
2019/09/04 Python
python matplotlib如何给图中的点加标签
2019/11/14 Python
如何通过python实现全排列
2020/02/11 Python
python+opencv实现移动侦测(帧差法)
2020/03/20 Python
Python实现进度条和时间预估的示例代码
2020/06/02 Python
pymysql模块使用简介与示例
2020/11/17 Python
解析HTML5中的新功能本地存储localStorage
2016/03/01 HTML / CSS
Waterford美国官网:爱尔兰水晶制品品牌
2017/04/26 全球购物
颁奖典礼主持词
2014/03/25 职场文书
承诺书的格式范文
2014/03/28 职场文书