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

原文地址:https://www.cnblogs.com/tony-stark/p/11431655.html

时间: 2024-10-12 14:44:29

js利用递归与promise 按顺序请求数据的相关文章

AJAX跨域请求数据

由于浏览器的同源策略 ajax请求不可以接收到请求响应回来的数据 请求数据需要调用浏览器的内置构造函数 XMLHttpRequest() 进行 实例对象 var xhr = new XMLHttpRequest(); 注意点 在IE8之前支持的 ActiveXobject("Microsoft.XMLHTTP");  记住要进行兼容处理哦  在这里我就不写了 通过该对象进行获取 获取数据的四种状态  xhr.readyState 该属性保存着请求数据的几种状态 1.xhr.open(请

js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面

js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面 , 做手机端开发时,发现一个问题,有些浏览器,在网速比较慢的情况下,js文件没有加载完,后续的调用已经开始调用了,导致出错.后来使用此法,保证了任何时候都完全是按照js的先后顺序执行的. 源码: /** * js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面 * 原理:利用 ajax 异步多线程快速加载, 每个文件加载完成后存入到加载完成数组中, * 显示到页面时完全按传入的顺

记一次nodejs 爬虫(利用递归循环nightmare)

记一次nodejs 爬虫(利用递归循环nightmare) 新手,欢迎交流 目标网站 这里的网址很有规律,方便我们获取图书列表的url nightmare几个主要的api 具体参考:http://www.manongjc.com/detail/8-roxmpabfhewimht.html .goto(url,options) url:目标网站 options:伪造头部信息 .wait(callback[selector]) 这个方法会重复调用,直到 return true, 可以传入选择器,如:

利用递归 实现UIScrollView无限滚动的效果

项目需求 利用递归 实现UIScrollView无限滚动的效果. 上机试题, #import "ViewController.h" @interface ViewController (){ UIScrollView *mainScroll; BOOL isFinish; int x; } @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; x=0; isFinish = YES;

JS在html中的执行顺序

一般来说在html页面中嵌入Javascript的方式有下面几种:1.放在页面的<script></script>标记之间:2.由<script>标记的src属性引入外部的js文件:3.放在页面元素的事件处理程序中,比如button的onclick事件中:4.作为URL的主体,使用Javascript:协议,比如<a href="window.open("about:blank");"></a>;5.Jav

初学seaJs模块化开发,利用grunt打包,减少http请求

原文地址:初学seaJs模块化开发,利用grunt打包,减少http请求 未压缩合并的演示地址:demo2 学习seaJs的模块化开发,适合对seajs基础有所了解的同学看,目录结构 js — —dist   //压缩后的目标文件夹 —lib   //各个模块 —drag    //拖拽模块 —scale   //缩放模块 —seajs    //seajs库 —seajs_drag    //入口的主文件main.js —main.js /*——————————————————————————

微信小程序使用promise封装异步请求

一:开发了一段时间的微信小程序,发现里面的API都是这样的: wx.showModal({ title: '提示', content: '这是一个模态弹窗', success: function(res) { if (res.confirm) { console.log('用户点击确定') } else if (res.cancel) { console.log('用户点击取消') } } }) 如果代码多了逻辑多了,就会出现所谓的回调地狱. wx.showModal({ title: '提示'

从零开始学 Web 之 Vue.js(四)Vue的Ajax请求和跨域

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN:https://blog.csdn.net/lvonve/ 在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目.现在就让我们一起进入 Web 前端学习的冒险之旅吧! 一.Vue发送Aj

uni-app图片压缩转base64位 利用递归来实现多张图片压缩

//选择图片 chooseImage(){ let that =this uni.chooseImage({ sizeType: ['original','compressed'], //可以指定是原图还是压缩图,默认二者都有 count: 9,//默认9 success: (rem) => { console.log(rem) that.tempFilePaths = rem.tempFilePaths; //#ifdef MP-WEIXIN //图片压缩并转base64 that.weixi