Как колбэком вернуть результат Ajax запроса?

Question

[Александра]

Понимаю, что для возврата результата из аякса нужно воспользоваться колбэком, но как это реализовать не пойму

function getBelts() {
    var request = new XMLHttpRequest();
    request.open('GET', 'api/belts/', true);
    request.onreadystatechange = function() {
        if (request.readyState === 4 && request.status === 200) {
            var beltsArr = JSON.parse(request.responseText);
            beltObj(beltsArr)
        }
    }
    request.send();
}

function beltObj(obj){
    return obj;
}

var beltObj = getBelts();

console.log(beltObj);

Comments

[Михаил]

var beltObj = getBelts();

console.log(beltObj);

где тут колбэк?

[Александра]

Михаил, я не знаю как это делается поэтому и спрашиваю, я учусь

[Михаил]

Александра, https://learn.javascript.ru/callbacks
в вызываемую функцию нужно передать функцию которую нужно будет вызвать после выполнения другой функции

Answer 1

[Антон В.]

function getBelts(callback) {
    var request = new XMLHttpRequest();
    request.open('GET', 'api/belts/', true);
    request.onreadystatechange = function() {
        if (request.readyState === 4 && request.status === 200) {
            var beltsArr = JSON.parse(request.responseText);
            callback(beltsArr)
        }
    }
    request.send();
}

function beltObj(array){
    console.log(array);
    return array;
}

getBelts(beltObj);

Comments

[Александра]

а этот результат нельзя вытащить наружу? если я присвою выполнение функции получаю undefined

var obj = getBelts(beltObj);
console.log('наш массив ' + obj); //undefined

[Антон В.]

Александра, Так как запрос отправляет асинхронно то в этом исполнении нельзя.

но если вы можете использовать версию языка ES2017 то вам может помочь async/await
https://learn.javascript.ru/async-await

[Антон В.]

Еще есть такой вариант на основании Promise

function getBelts() {

return new Promise((resolve, reject) => {
    var request = new XMLHttpRequest();
    request.open('GET', 'api/belts/', true);
    request.onreadystatechange = function() {
        if (request.readyState === 4 && request.status === 200) {
            var beltsArr = JSON.parse(request.responseText);
            resolve(beltsArr)
        }
    }
    request.send();
}
}

var obj = getBelts();
obj.then(function(array){
    console.log(array);
    return array;
})

[Антон В.]

Александра, дело в том что js не ждет пока отправить запрос на сервер, он исполняется дальше.
Потом скажем через 1-2 секунды ваш запрос выполнился и вернул результат в onreadystatechange.
в то время как строки

var obj = getBelts(beltObj);
console.log('наш массив ' + obj); //undefined

уже выполнились...

вы можете использовать функцию callback или использовать Promise.

async/await может позволить вам сделать то что вы хотите, но возможно с этим вариантом у вас могут возникнуть трудности.

[Александра]

Антон В., спасибо за ответы, в итоге, решила в базе объединить данные под один аякс запрос

[Антон В.]

Александра, не за что. кстати может быть будет интересно, можно отправить например 2(или более) запросов использую промисы, и использую Promise.all дождаться их всех.

var p1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 200, "foo2");
}); 
var p2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, "foo1");
}); 

Promise.all([p1, p2]).then(values => { 
  console.log(values); 
});

[Александра]

Антон В., спасибо, буду пробовать, с сегодняшнего дня разбираю промисы)