Question

我有一个调用分页API的函数。它首先调用第一页，然后继续使用响应中返回的f hex = 0000001111 bin 1000 dec = 1111101000 bin & 0000001000 bin = 8 dec url向后续页面发出请求。它会在next为next之前执行此操作。我试图从响应中提取数据（城市名称）并将它们推送到全局数组。

我的代码目前看起来像这样：

null

假设我有两页JSON，如下所示：

Page 1

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

Page 2

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

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

{
    "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

如评论中所述，console.log在请求完成之前执行。相反，你会想做这样的事情：

var results = [];
function nextPage(url) {
    if (!url) {
        return;
    }
    $.getJSON(url, function(data) {
        $.each(data.results, function (k, v) {
            results.push(v.city_name);
        });
        if(data.next){
            // There is a next page, continue:
            nextPage(data.next);
        }else{
            // You're done:
            console.log(results);
        }
    });
}

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

Answer 2

以下是我建议您使用jQuery承诺执行此操作的方法：

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，因为它已达到值。

内部nextPage()函数采用下一个URL。我测试它在结果中得到的url，然后再次在该url上调用自己，将原始的下一个承诺链接起来，或者将最终结果作为promise的最终履行值返回。

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

2 个答案: