jQuery-如何從內部Ajax調用接收結果？

Question

我正在開發一個Web應用程序，用戶可以在其中通過單擊地圖來識別地圖上的位置（我使用jquery 3.1 ）。 問題是我必須進行一些ajax調用，一個依賴於另一個調用，並且在最后一次調用時，結果沒有作為一個整體（完整數組）返回，而我僅收到一部分數組。

該問題在var a4中仍然存在。

我如何使a4結果作為完整數組發送，因為我嘗試了延遲但沒有預期的結果？

var getLocDetails = function () {
    // Parse a web api based on user lat & lon
    var a1 = $.ajax({
        method: 'GET',
        url: 'http://nominatim.openstreetmap.org/reverse?lat=44.43588&lon=26.04745&accept-language=ro&format=json'
    });

    // Get osm_type & osm_id and parse another web service to get a XML document (Ex.: https://www.openstreetmap.org/api/0.6/way/28240583)
    var a2 = a1.then(function (data) {
        return $.ajax({
            method: 'GET',
            url: 'https://www.openstreetmap.org/api/0.6/' + data.osm_type + '/' + data.osm_id
        })
    });

    // Get all 'ref' attribute from every 'nd' node from XML and make an array with this values
    var a3 = a2.then(function (data) {
        var osmChildren = data.documentElement.childNodes;
        var out = [];

        for (var i = 0; i < osmChildren.length; i++) {
            if (osmChildren[i].nodeName == 'way') {
                var wayChildren = osmChildren[i].childNodes;
                for (var j = 0; j < wayChildren.length; j++) {
                    if (wayChildren[j].nodeName == 'nd') {
                        var ndRef = Number.parseInt(wayChildren[j].getAttribute('ref'));
                        out.push(ndRef);
                    }
                }
            }
        }
        return out;
    });

    // HERE IS THE PROBLEM
    // Based on array returned from a3, I am parsing every link like 'https://www.openstreetmap.org/api/0.6/node/ + nodeRef' to extract every lat and lon values for extreme points
    var a4 = a3.then(function (data) {
        var defer = $.Deferred();
        var out = [];

        for (var i = 0; i < data.length; i++) {
            var nodeRef = data[i];
            var nodeUrl = 'https://www.openstreetmap.org/api/0.6/node/' + nodeRef;

            $.ajax({
                method: 'GET',
                url: nodeUrl
            }).done(function (response) {
                var node = response.documentElement.firstElementChild;
                var lat = Number.parseFloat(node.getAttribute('lat'));
                var lng = Number.parseFloat(node.getAttribute('lon'));

                out.push([lat, lng]);
                defer.resolve(out);
            });
        }
        return defer.promise();
    });

    // When a4 is done, based his result, I have to have an array of lat & lon coordonates, but I recived only 1-2 coordonates even I have 10.
    a4.done(function (data) {
        console.log(data);
        // Here I have to draw a polygon
    });
}

Answer 1

您需要處理數組中的請求，因為您執行的操作往往會在完成所有操作之前解決a4的回調。

為此，我們可以使用$.when函數

var req = [];
// Based on array returned from a3, I am parsing every link like 'https://www.openstreetmap.org/api/0.6/node/ + nodeRef' to extract every lat and lon values for extreme points
var a4 = a3.then(function (data) {
    var defer = $.Deferred();
    var out = [];

    for (var i = 0; i < data.length; i++) {
        var nodeRef = data[i];
        var nodeUrl = 'https://www.openstreetmap.org/api/0.6/node/' + nodeRef;

        req.push(
            $.ajax({
                method: 'GET',
                url: nodeUrl
            }).done(function (response) {
                var node = response.documentElement.firstElementChild;
                var lat = Number.parseFloat(node.getAttribute('lat'));
                var lng = Number.parseFloat(node.getAttribute('lon'));
                out.push([lat, lng]);
            })
       );
    }
    $.when.apply($, req).done(function(){
        return defer.resolve(out);
    });
    return defer.promise();
});