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中关于简单事件的处理与浏览器对象,下面有个不错的示例,感兴趣的朋友可以参考下
    2013-11-11
  • elementUI Table 自定义表头动态数据及插槽的操作

    elementUI Table 自定义表头动态数据及插槽的操作

    本文介绍了如何实现一个高度自定义的列表界面,其中表格的表头由后端返回,并且允许用户根据需求自定义表头和数据展示样式,本文给大家介绍elementUI Table 自定义表头动态数据及插槽的操作,感兴趣的朋友跟随小编一起看看吧
    2024-10-10
  • 一起学写js Calender日历控件

    一起学写js Calender日历控件

    这篇文章主要和大家一起学写js Calender控件,自己动手编写了一个简易日历控件,感兴趣的小伙伴们可以参考一下
    2016-04-04
  • Object.defineproperty方法示例详解

    Object.defineproperty方法示例详解

    Object.defineproperty 的作用就是直接在一个对象上定义一个新属性,或者修改一个已经存在的属性,这篇文章主要介绍了Object.defineproperty方法,需要的朋友可以参考下
    2022-12-12
  • 浅谈Javascript数组(推荐)

    浅谈Javascript数组(推荐)

    数组,即Array类型,是开发中最常用的类型之一。这篇文章主要介绍了浅谈Javascript数组的相关资料,需要的朋友可以参考下
    2016-05-05
  • Javascript实现一朵从含苞到绽放的玫瑰

    Javascript实现一朵从含苞到绽放的玫瑰

    今天小编就为大家分享一篇关于Javascript实现一朵从含苞到绽放的玫瑰,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-03-03
  • 微信小程序实现计时器

    微信小程序实现计时器

    这篇文章主要为大家详细介绍了微信小程序实现计时器,小程序点击事件触发计时器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-09-09
  • JS hashMap实例详解

    JS hashMap实例详解

    这篇文章主要介绍了JS hashMap实例详解的相关资料,包括删除键值、获取键值的相关知识,非常不错具有参考借鉴价值,需要的朋友一起看看吧
    2016-05-05
  • electron中获取mac地址的实现示例

    electron中获取mac地址的实现示例

    在基于Electron的应用中,有一个业务需求是获取物理网卡的Mac地址以用于客户机唯一性识别,本文主要介绍了electron中获取mac地址的实现示例,具有一定的参考价值,感兴趣的可以了解一下
    2023-12-12
  • JS实现根据URL批量下载文件并压缩成zip文件

    JS实现根据URL批量下载文件并压缩成zip文件

    这篇文章主要为大家学习介绍了JS如何实现根据URL批量下载文件并压缩成zip文件,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一下
    2023-08-08

最新评论