Как вернуть результат асинхронного запроса?

Question

[Максим Медведев]

Пытаюсь переписать с jquery на простой js скрипт. Есть у меня такой код:

var test = postAjax(url, data);
console.log(test);

и собственно сама отправка запроса:

function postAjax (url, data) {  
    return new Promise((resolve, reject) => {
        var xhr = new XMLHttpRequest();
        xhr.open('POST', url, true);
        xhr.responseType = 'json';
        xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
        xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
        xhr.send(JSON.stringify(data));

        xhr.onload = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                resolve(xhr.response);
            }
        };
    }).then(
        response => {
            console.log(response);
            return response;
        }
    );
}

Мне нужно, чтобы postAjax возвращал результат запроса в test.
Я смотрю эту статью - https://learn.javascript.ru/promise - но не могу понять что нужно сделать.

Comments

[Сергей Соколов]

по что не используете Fetch API?

Answer 1

[Антон Иванов]

советую еще переписать с xhr на fetch

Answer 2

[Надим]

Используйте await:

var test = await postAjax(url, data);
console.log(test);

Если вы этот код будете использовать не в консоли, а где-то в своем коде внутри какой-нибудь функции, то добавьте к этой функции приставку async, чтобы не было ошибки.

Comments

[Максим Медведев]

Uncaught SyntaxError: await is only valid in async functions and the top level bodies of modules

[Надим]

Максим Медведев, добавьте приставку async к той функции внутри которой используете await.

[Максим Медведев]

Надим Закиров, уже прописал так:

const postAjax = async (url, data) => {
   return await new Promise(...);
};

[Надим]

Максим Медведев, для справки, приставку await можно использовать только у асинхронных функций, чтобы сделать обычную функцию асинхронной, добавляете к ней приставку async:

async function test() {
...
}

[Надим]

Максим Медведев, вы не то прописали!

[Максим Медведев]

уже проверил такой вариант:

async function postAjax (url, data) {

}

[Надим]

Максим Медведев, повторяюсь, вы не то и не туда прописываете! Внутри какой функции вы вызываете await postAjax? Вот для этой функции и прописываете async! Для той внешней функции внутри которой идет вызов postAjax!!!

[WbICHA]

Максим Медведев, js async await в гугл, учить основы.

[Максим Медведев]

Надим Закиров, я пишу так:

var ready = (callback) => {
            if (document.readyState != "loading") callback();
            else document.addEventListener("DOMContentLoaded", callback);
        }
	ready(() => {

		var test = postAjax(url, data)
               console.log(test);
      });

сама функция

async function postAjax (url, data) {
    return await new Promise((resolve, reject) => {
        var xhr = new XMLHttpRequest();
        xhr.open('POST', url, true);
        xhr.responseType = 'json';
        xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
        xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
        xhr.send(JSON.stringify(data));

        xhr.onload = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                resolve(xhr.response);
            }
        };
    }).then(
        response => {
            console.log(response);
            return response;
        }
    );
}

WbICHA, а зачем свой прошлый ответ удалил? я смотрел в гугле, не разобрался.

[Надим]

Максим Медведев, бля, вы вообще лютую хуйню сделали. Знаете, я готов вам помочь и показать удаленно как надо, так сказать объяснить основы работы с промисами, но не бесплатно, тут у меня уже нет сил разжёвывать все дальше.

[WbICHA]

Максим Медведев, когда и что я удалял?

[Максим Медведев]

Надим Закиров, нет, спасибо, не нужно.
разобрался в чем дело. получается, что делать нужно так:

async function doAjaxThings() {
                var test = await postAjax(url, data);
               console.log(test);
            };
            doAjaxThings();

и

async function postAjax(url, data) {   
    return await new Promise((resolve, reject) => {
....

а вся работа с результатом запроса может идти только в doAjaxThings() и за ее пределы не выйти.

[Надим]

Максим Медведев, здесь async и await лишние, уберите:

async function postAjax(url, data) {   
    return await new Promise((resolve, reject) => {
....