Почему Ajax запрос не возвращает данные?

Question

[weranda]

Приветствую.
Есть функция и ее вызов:

function getName(user_id) {

            // data
            var data = {}
            data.user_id = user_id
            data = JSON.stringify(data)

            // send
            const request = new XMLHttpRequest();
            request.open("POST", "/test-ajax/");
            request.send(data);

            // get
            request.onload = function() {
                var name = JSON.parse(this.response)
                console.log(name) // <<< тут данные есть
                return name
            }
        }

var user_name = getName(user_id)
console.log(user_name)  // <<< undefined

Внутри функции данные есть (видно через console.log), но в переменную user_name они не попадают. Поясните, пожалуйста, почему так происходит.

Answer 1

[Василий Банников]

Ошибка у тебя в том, что Ajax-запрос выполняется асинхронно.
Тоесть функция getName вернёт управление в вызывающую функцию ещё до того, как даже будет вызван твой onload.
+ по хорошему onload нужно устанавливать ещё до отправки.
Это раз.

А два - return твой возвращает управление в момент вызова onload, а по тому просто некому будет на той стороне прочитать полученные данные.

Решения два:
1. Использовать промисы. Например так:

function getName(user_id) {
    return new Promise(function(resolve) {
        // data
        var data = {}
        data.user_id = user_id
        data = JSON.stringify(data)

        // send
        const request = new XMLHttpRequest();
        request.open("POST", "/test-ajax/");
        request.send(data);
        request.onload = function() {
            var name = JSON.parse(this.response)
            resolve(name);
        }
    });
}

// Дальше работаем через then
getName(user_id).then(data=>console.log(data));

// Или async/await
const name = await getName(user_id);

В этом примере мы сразу возвращаем объект-промис, который будет завершён внутри onload. А дальше можно с ним работать через async-await или then с коллбэком.

2. Использовать коллбэки (по старинке):

function getName(user_id, callback) {

    // data
    var data = {}
    data.user_id = user_id
    data = JSON.stringify(data)

    // send
    const request = new XMLHttpRequest();
    request.open("POST", "/test-ajax/");
    request.send(data);

    // get
    request.onload = function() {
        var name = JSON.parse(this.response)
        callback(name)
    }
}

var onNameLoaded = function(name) {
    console.log(name)
};
getName(user_id, onNameLoaded);

В этом примере мы передаём в функцию getName другую функцию, которая должна быть вызвана после загрузки данных.

3. Использовать fetch и async/await - мы же в 2022 году живём. (@Mi11er)

async function getName(userId) {
    const response = await fetch("/test-ajax/", {
        method: "POST",
        body: JSON.stringify({"user_id": userId})
    })
    return await response.json();
}

const name = await getName(userId);

Comments

[weranda]

Спасибо вам за такое подробное объяснение!

[weranda]

Василий Банников Может быть подскажете в чем ошибка или как вернуть нужные данные (на картинке ниже)? Код выше возвращает в консоли вот такую штуку:

Мне надо вернуть массив, который находится внутри PromiseResult. Пытался разобраться, но как-то прям тугооооо идет.

Единственное, что наковырял в сети — это дополнительная функция:

async function foo() {
    var name = await getName(data);
    console.log(name)
}
foo()

Тогда массив возвращается, но дополнительная функция — нормально ли это? Может быть, есть варианты проще?

[Василий Банников]

weranda, думаю, тебе интересна будет эта статья https://habr.com/ru/post/466337/

[weranda]

Василий Банников, почитал, ничего не понял — какой-то понос словесный и простыня текста.

[Василий Банников]

weranda, тогда коротко:

Тогда массив возвращается, но дополнительная функция — нормально ли это? Может быть, есть варианты проще?

1. Да, это нормально. Это так приходится делать из-за того что функции асинхронные.
Вроде как в новых версиях браузеров можно await на самом верхнем уровне писать и тогда не нужна дополнительная функция-обёртка.
2. Не возвращается, а просто пишется в консоль

[weranda]

Василий Банников, А обходных путей нет? Или не париться по этому поводу и просто дописать эту доп. функцию? Как считаете?

[Василий Банников]

weranda, обходных путей нет.

[weranda]

Василий Банников, Еще раз спасибо вам за объяснение.

Answer 2

[Denis Melnikov]

Чет как то больно смотреть без feetch...

async function getName(userId) {
    let response  = await feetch("/test-ajax/", {
         method: "POST", 
         body: JSON.stringify(userId)
})
let name = await response.json()

}

Comments

[weranda]

А есть возможность пояснить в чем именно я допустил ошибку в коде из примера? Хочется же знать, а не просто скопипастить.

[Василий Банников]

weranda,
Использовать XMLHttpRequest в 2022 году - это ошибка.
Использовать XMLHttpRequest без знания основ js - фатальная ошибка.

[weranda]

Василий Банников, А что не так с XMLHTTPRequest?

[Василий Банников]

weranda, у него неудобный API.
Код с использованием xhr не удобно писать, и ещё хуже читать.

Answer 3

[zkrvndm]

Вы не правильно ответ смотрите.

Смотрите пример:
https://developer.mozilla.org/ru/docs/Web/API/XMLH...