如何根据需要生成尽可能多的请求以从 API 获得独特的结果？答案

【问题标题】：How can I spawn as many requests as needed to get unique results from an API?如何根据需要生成尽可能多的请求以从 API 获得独特的结果？
【发布时间】：2020-09-21 04:05:55
【问题描述】：

我正在做一个练习，以使用 JavaScript 从 API 中获得不同的随机结果。

我的想法是拥有一组我已经得到的结果，并发出完成工作所需的尽可能多的异步请求。

我尝试使用 Axios 和 jQuery（我应该使用第一个，但它不起作用，由于我对 jQuery 的经验更丰富，我决定尝试一下），但两者都不起作用。

这是我的代码：

let categories = [];

    function fillCatsWithAxios() {
            let spawn = 5;
            while (categories.length < 5) {
                    if (spawn) {
                            let offset = Math.floor(Math.random() * 1000);
                            console.log('Spawning one with offset ' + offset);
                            axios.get('http://jservice.io/api/categories', {
                            params: {
                                    count: 1,
                                    offset: offset 
                            }
                            }).then(function(value) {
                                    let id = value.data[0].id;
                                    console.log('Got one! Id = ' + id );
                                    if (categories.indexOf(id) == -1) {
                                            console.log('A new one, adding');
                                            categories.push(id);
                                    } else {
                                            console.log('Duplicated, try again');
                                            spawn++;
                                    }
                            });
                            spawn--;
                    }
            }

            console.log(categories);
    }

function fillCatsWithJQuery() {
                let spawn = 5;
                while (categories.length < 5) {
                        if (spawn) {
                                let offset = Math.floor(Math.random() * 1000);
                                console.log('Spawning one with offset ' + offset);
                                $.ajax({
                                        url: 'http://jservice.io/api/categories', 
                                        data: {
                                                count: 1,
                                                offset: offset 
                                        },
                                        success: function(value) {
                                                let id = value.data[0].id;
                                                console.log('Got one! Id = ' + id );
                                                if (categories.indexOf(id) == -1) {
                                                        console.log('A new one, adding');
                                                        categories.push(id);
                                                } else {
                                                        console.log('Duplicated, try again');
                                                        spawn++;
                                                }
                                        }});
                                spawn--;
                        }
                }

                console.log(categories);
        }

当我在浏览器上运行此脚本时，我从未看到“得到一个！”消息并查看开发人员的控制台，我也没有看到任何 XHR 正在执行:(

奇怪的是，如果我将 while 条件更改为固定的东西（比如固定的迭代次数），它会起作用......

有什么想法吗？

【问题讨论】：

while (categories.length < 5) - 这永远不会完成。请记住 success: 调用是异步的，因此只能在 a) $.ajax 完成和 b) 当您的 js 代码完成时运行 - 没有“中断” - 因为在回调之外没有任何改变 categories，这永远不会完成，js 永远不会有机会进行 ajax 调用。删除该行，修复value.data[0]，它可以正常工作（一次）jsfiddle.net/1x57swm4，然后从回调中进行第二次（和后续）调用。
这很有趣...我不知道条件 b)，我认为它会并行运行...是否有类似“yield”或任何其他关键字的东西可以允许第二个线程运行？
JavaScript 是单线程的——一次只能“运行”一件事。

标签： javascript jquery ajax axios

【解决方案1】：

感谢@freedomn-m 的评论，我得到了这个解决方案：

<script type="text/javascript">
    let categories = [];
    let spawn = 5;

    let catFiller = setInterval(function() {
            let offset;

            if ( categories.length < 5 ) {
                    for ( let i = 0; i < spawn; i++ ) {
                            offset = Math.floor(Math.random() * 1000);
                            console.log('Spawning one with offset ' + offset);
                            axios.get(
                                    'http://jservice.io/api/categories', 
                                    {
                                            params: {
                                                    count: 1,
                                                    offset: offset 
                                            }
                                    })
                                    .then(function(value) {
                                            let id = value.data[0].id;
                                            console.log('Got one! Id = ' + id );
                                            if (categories.indexOf(id) == -1) {
                                                    console.log('A new one, adding');
                                                    categories.push(id);
                                                    spawn--;
                                            } else {
                                                    console.log('Duplicated, try again');
                                            }
                                    });
                    }
            } else {
                    clearInterval(catFiller);
            }
    }, 1000 );

这是在做我想做的事（尽管方式比我想象的要复杂得多：）

谢谢！

【讨论】：