Обработка двух отдельных вызовов JQuery Api

Question

Я изо всех сил пытаюсь найти способ взять «результат» двух вызовов API и затем обработать их вместе.В обоих вызовах я получаю JSON, а затем анализирую его в формате GeoJSON.Затем я хочу иметь возможность поместить оба этих объекта геоджона в другую функцию, так что они предположительно должны стать «глобальными»?

Я знаю, что я имею дело с проблемами асинхронности здесь и решениемвероятно, чтобы сделать оба вызова API в той же функции?Я не могу понять, как это сделать.

PS На странице ранее была создана листовка, отсюда и ссылка на карту.

###First API Call
    $.ajax({
      url:"PORT API URL",
      dataType: "json",
      success: function(port_response){
      port_callback(port_response)
    }})


    function port_callback(port_response) {
        var port_geojson = {
            type: "FeatureCollection",
            features: [],
        };
        for (var i in port_response.data) {
            port_geojson.features.push({
            "type": "Feature",
            "geometry": {
            "type": "Point",
            "coordinates": [port_response.data[i].longitude, port_response.data[i].latitude]
            },
            "properties": {
            "stationName": port_response.data[i].port_name
            }})}
        L.geoJSON(port_geojson).addTo(map);
    };


###Second API Call
    $("#single-postcode").click(function (event) {
    event.preventDefault();
    var $result = $("#single-postcode-result").slideUp(),
            postcode = $("#single-postcode-input").val();
    $.get(encodeURI("POSTCODE API URL" + postcode))
    .done(function (data) {
        displayJsonResult($result, data);
        callback1(data)
        callback2(data)
    })
    .fail(function (error) {
        displayJsonResult($result, error.responseJSON);
    });
    });

    var displayJsonResult = function ($context, data) {
        $context.html(JSON.stringify(data, null, 4)).slideDown();
        console.log(JSON.stringify(data))
    }



    function callback1(data) {
        var geojson = {
        type: "FeatureCollection",
        features: [],
        };
            for (var i in data.result) {
                geojson.features.push({
                "type": "Feature",
                "geometry": {
                "type": "Point",
                "coordinates": [data.result.longitude, data.result.latitude]
                },
                "properties": {
                "postcode": data.result.postcode
                }
                })};
                L.geoJSON(geojson).addTo(map);
                map.setView([JSON.parse(data.result.latitude),JSON.parse(data.result.longitude)], 14);


        };

Answer 1

Мы можем использовать метод ES6 Promise для достижения этой цели. Вот простой пример для вызова двух асинхронных функций и возврата некоторой строки.

function firstFunction(duration) {
    return new Promise(function(resolve, reject) {
      //you can call your ajax call here and put your success response inside resolve callback
        setTimeout(resolve("FirstObject"), duration);
    });
}
function secondFunction(duration) {
    return new Promise(function(resolve, reject) {
        setTimeout(resolve("secondObject"), duration);
    });
}

var promiseAll = firstFunction(5000).then(() => {
    //promise all the method to get all result of all async calls
    return Promise.all([firstFunction(100), secondFunction(200)]);
})

let result = document.getElementById("result");

promiseAll.then((val)=>{ result.InnerHtml = "First and second Fullfillment done.." + val;
console.log("First and second Fullfillment done.. "+val)},
  (err)=>{console.log("one/all rejected "+err)})

<p>Once you run the function you can see the return values from each function call</p>
<div id="result">
</div>

Answer 2

Вы можете попробовать использовать это.Вызов обоих API вместе!и он будет выполняться, когда оба API успешно

   $.when( $.ajax( "/page1.php" ), $.ajax( "/page2.php" ) )
   .then( myFunc, myFailure );