javascript - 从多个 API 请求推送到全局数组

Question

我有一个调用分页 API 的函数。它对第一页进行初始调用，然后使用响应中返回的 next url 继续向后续页面发出请求。它会执行此操作，直到 next 为 null。我正在尝试从响应中提取数据(城市名称)并将其推送到全局数组。

我的代码目前如下所示:

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，如下所示:

第 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"
        }
    ]
}

我希望数组看起来像这样:

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

但是，当我将结果记录到控制台时，数组为空。有人可以帮忙吗？如果您需要更多信息，请告诉我。干杯

Answer 1

以下是我建议您使用 jQuery Promise 执行此操作的方法:

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
});

这允许您调用 then 函数，然后从函数中获取数据以在其他代码中使用。它还提供了错误处理路径。

getCities 函数获取第一个 URL，然后返回一个 Promise，该 Promise 会在满足值时使用结果数组进行解析。

内部nextPage()函数获取下一个URL。我测试它在结果中获得的 url，然后在该 url 上再次调用自身，将下一个 promise 链接到原始 promise ，或者返回最终结果作为 promise 的最终实现值。