Обработка Ajax запроса?

Question

[massef]

Привет!

Тернируюсь в функциях и Ajax запросах.
Есть два запроса и функция которая должна обрабатывать результат (сложение двух id), но не могу понять как вытащить данные в переменные.
https://codepen.io/anon/pen/YYMaKB?editors=0011

Правильно вообще я делаю? Предложите свой вариант с пояснениями.

Answer 1

[roswell]

Первая буква в AJAX — сокращение от Asynchronous, из чего следует, что время и даже результат выполнения requestOne и requestTwo фактически неопределённы. Я бы устроил нечто вроде

requestOne( function( data ) {
    var r = false;
    if ( data ) {
        var r1 = data.id;
        requestTwo( function( data ) {
            if ( data ) {
                var r2 = data.id;
                console.log( r1 + r2 );
            }
        } );
    }
} );

Или через $.when ; примеры приводить не буду, их по ссылке достаточно.

Comments

[massef]

Понял, все дело в замыканиях. Про $.when не знал, почитаю. Спасибо!

Answer 2

[Andreo]

Каждая функция $.ajax возвращает так называемый объект Deffered. Их можно использовать при помощи еще одной функции $.when, при помощи которой мы при успешном завершении обоих запросов получаем возможность достучаться до ответов в одном месте:

console.clear();

var root = 'https://jsonplaceholder.typicode.com';

function requestOne(callback) {
    return $.ajax({
        type: "GET",
        url: root + '/posts/1',
        // dataType: "json",
        success: callback
    });
}

function requestTwo(callback) {
    return $.ajax({
        type: "GET",
        url: root + '/posts/2',
        // dataType: "json",
        success: callback
    });
}

function result() {
  var deffered1 = requestOne();
  var deffered2 = requestTwo();

  $.when(deffered1, deffered2).done(function(r1, r2) {
    console.log(r1[0].id + r2[0].id);
  })
  
  // результатом хотел видеть сложение двух айдишников
  // console.log(r1 + r2);
}
result();

Comments

[massef]

Андрулєс Поясните пожалуйста, для чего return перед $.ajax?
Разве success: callback не делает тоже самое?

[Andreo]

Очень, кстати, правильный вопрос. В вашем случае callback-функции не нужны, а функции, возвращающие Deffered-обьекты от $.ajax - упростить до присваивания переменным deffered1 и deffered2 возвращаемым значением самого $.ajax (Deffered-обьект)

var deffered1 = $.ajax({
        type: "GET",
        url: root + '/posts/2'
});

Разве success: callback не делает тоже самое?

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