如何循环进行异步获取?循环变量无法确定?

需求:利用Github V3版本的API,获取某个用户star的项目个数。

用户的api并没有单独提供star个数,而是提供了这样的接口
"starred_url": "https://api.github.com/users/tj/starred{/owner}{/repo}"

查了一下,,github api采用分页技术,如果用上述默认接口,最多只能返回30条内容。因而需要利用参数获取:https://api.github.com/users/tj/starred?page=1&per_page=100,per_page最大可为100.

也就是说我需要这样GET多个接口,直到获取的接口返回[ ]:
axios.get(`/users/${app.userName}/starred?page=${i++}&per_page=100`)

循环程序是同步执行的,GET请求是异步获取。然而我的循环变量与异步获取的数据有关!那么循环代码要怎么写呢?
下面是我用递归写的代码,不过处理得很慢。。这是demo,可以输入tj试一下,很慢的。

let starredLists = []
                    
!function getStarred(index){
    axios.get(`/users/${app.userName}/starred?page=${index++}&per_page=100`)
        .then(function(response){
            starredLists.push(...response.data)            console.log(starredLists.length + '   ' + index)            if(response.data.length == 100)
                getStarred(index);            if(response.data.length != 100)
                app.stars = starredLists.length;
        })
}(1)


慕慕森
浏览 444回答 2
2回答

汪汪一只猫

一定要循环么 用递归请求呗

慕桂英3389331

用了递归的方式,解决了循环变量无法确定的问题;同时为了性能,用Promise.all()做了批量请求。获取3个组10个接口(以tj大神的star为例)需要大约10s//get&nbsp;user's&nbsp;starred&nbsp;repos&nbsp;&nbsp;&nbsp;let&nbsp;starredLists&nbsp;=&nbsp;[];let&nbsp;promiseTen&nbsp;=&nbsp;[],&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;promiseOne; !function&nbsp;getStarred(index)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;//用for循环,一次性请求十个接口,加快速度,避免同步-异步-同步的反复切换 &nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;(let&nbsp;i&nbsp;=&nbsp;0;&nbsp;i&nbsp;<&nbsp;10;&nbsp;i++)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;promiseOne&nbsp;=&nbsp;axios.get(`/users/${app.userName}/starred?page=${index++}&per_page=100`) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.then(function&nbsp;(response)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;starredLists.push(...response.data) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;promiseTen.push(promiseOne) &nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;Promise.all(promiseTen).then(()&nbsp;=>&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(starredLists.length&nbsp;%&nbsp;100&nbsp;==&nbsp;0)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//检查是否需要递归 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;getStarred(index)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app.stars&nbsp;=&nbsp;starredLists.length&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;}) }(1)
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

Html5