按从多个API请求全局数组 [英] Push to global array from multiple API requests

问题描述

我有一个调用API分页功能。它使第一页的初始呼叫，然后继续进行使用在响应中返回的接下来 URL请求后续页面。它这样做，直到接下来是空。我试图从响应中提取数据（城市名），将这些以一个全局数组。

I have a function that calls a paginated API. It makes an initial call to the first page, then continues to make requests to the subsequent pages using the next url returned in the response. It does this until next is null. I am trying to extract data (city names) from the response and push these to a global array.

我的code目前看起来是这样的：

My code currently looks like this:

var results = [];
function nextPage(url) {
    if (!url) {
        return;
    }
    $.getJSON(url, function(data) {
        nextPage(data.next);
        $.each(data.results, function (k, v) {
            results.push(v.city_name);
        });
    });
}

nextPage('http://url.com/api/v1/cities/?page=1');
console.log(results);

假设我有JSON的两个页面看起来像这样的：

Assuming I have two pages of JSON that look like this:

1 的

{
    "count": 105,
    "next": "http://url.com/api/v1/cities/?page=2",
    "previous": null,
    "results": [
        {
            "city_name": "Paris"
        },
        {
            "city_name": "Brussels"
        }
    ]
}

的页2 的

{
    "count": 105,
    "next": null,
    "previous": "http://url.com/api/v1/cities/?page=1",
    "results": [
        {
            "city_name": "Manchester"
        },
        {
            "city_name": "Curitiba"
        }
    ]
}

我希望数组是这样的：

I would expect the array to look like this:

["Paris", "Brussels", "Manchester", "Curitiba"]

然而，当我登录结果控制台的数组为空。任何人都可以帮忙吗？让我知道如果你需要任何更多的信息。干杯

However, when I log results to the console the array is empty. Can anyone help? Let me know if you need any more information. Cheers

推荐答案

下面是我会怎么做，你这个使用jQuery承诺建议：

Here's how I would suggest you do this using jQuery promises:

function getCities(initialUrl) {
    var results = [];

    function nextPage(url) {
        return $.ajax(url, {method: "POST", data: {json: src[cntr++]}}).then(function(data) {
            $.each(data.results, function (k, v) {
                results.push(v.city_name);
            });
            if (data.next) {
                return nextPage(data.next);
            } else {
                return results;
            }
        });
    }

    return nextPage(initialUrl);
}

getCities('http://url.com/api/v1/cities/?page=1').then(function(results) {
    console.log(results);
}, function(err) {
    // handle error here
});

这允许您调用函数，然后再获取数据的函数在其他code使用。它还提供了一个错误处理的路径。

This allows you to call then function and then get the data out of the function to use in other code. It also provides an error handling path.

该getCities函数采用第一个URL，然后返回，因为它的价值实现与结果的阵列解决的承诺。

The getCities function takes the first URL and then returns a promise that resolves with the array of results as it's fulfilled value.

内部下一页（）函数将在下次网址。我测试它得到的结果的URL，然后要么该URL链接的下一个承诺，原再次调用自身或返回最终结果作为承诺的最终实现价值。

The internal nextPage() function takes the next URL. I tests the url it gets in the results and then either calls itself again on that url chaining the next promise to the original or returns the final result as the ultimate fulfilled value of the promise.

这篇关于按从多个API请求全局数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！