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

 更新时间:2019年08月30日 08:58:17   作者:wangnima666  
这篇文章主要介绍了js利用递归与promise 按顺序请求数据,需要的朋友可以参考下

问题:项目中有一个需求,一个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])

 最终我们打印结果得到:

 

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

总结

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

相关文章

  • js实现点击切换和自动播放的轮播图

    js实现点击切换和自动播放的轮播图

    这篇文章主要为大家详细介绍了js实现点击切换和自动播放的轮播图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • JS轻松实现CSS设置,DIV+CSS常用CSS设置

    JS轻松实现CSS设置,DIV+CSS常用CSS设置

    JS轻松实现CSS设置,DIV+CSS常用CSS设置...
    2007-02-02
  • js验证整数加保留小数点的简单实例

    js验证整数加保留小数点的简单实例

    这篇文章主要介绍了js验证整数加保留小数点的简单实例,有需要的朋友可以参考一下
    2013-12-12
  • 信息页文内画中画广告js实现代码(文中加载广告方式)

    信息页文内画中画广告js实现代码(文中加载广告方式)

    一般来说文章内容中的广告点击率更好,也更容易被访客看到,如果直接将广告放到页面头部会影响网站的速度,所以一般都比较喜欢这种方法,这里分享下实现方法
    2016-01-01
  • Java SE 9 多版本兼容 JAR 包示例

    Java SE 9 多版本兼容 JAR 包示例

    这篇文章主要介绍了Java SE 9 多版本兼容 JAR 包示例,Java 9 版本中增强了Jar 包多版本字节码文件格式支持,也就是说在同一个 Jar 包中我们可以包含多个 Java 版本的 class 文件,更多相关内容感兴趣的小伙伴可以参考一下
    2022-08-08
  • 微信小程序如何获取手机验证码

    微信小程序如何获取手机验证码

    这篇文章主要为大家详细介绍了微信小程序如何获取手机验证码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • JavaScript中instanceof运算符的用法总结

    JavaScript中instanceof运算符的用法总结

    这篇文章主要是对JavaScript中instanceof运算符的用法进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • JavaScript快速排序算法不同版本原理解析

    JavaScript快速排序算法不同版本原理解析

    这篇文章主要为大家介绍了JavaScript快速排序算法不同版本原理解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • javascript实现移动的模态框效果

    javascript实现移动的模态框效果

    这篇文章主要为大家详细介绍了javascript实现移动的模态框效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • js 文件引入实现代码

    js 文件引入实现代码

    项目前端的文件和后台开发分离,只要后台开发更新svn前端的js,css文件都会更新,以前引用的是一个js文件如AA.js,由于想在项目中引用jquery库,如果在每个文件的头部都引让他们从新写入这个jq文件不太可能
    2010-04-04

最新评论