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

Push to global array from multiple API requests

本文关键字：全局 数组 请求 API      更新时间：2023-09-26

我有一个函数调用一个分页的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"]

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

以下是我建议您如何使用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
});

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

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

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

如注释中所述，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');
相关文章：