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

@vvshnik14 · Регистрация: 26.06.2016

Студворк — интернет-сервис помощи студентам

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
MyMethod_One() {
      let dest_object = {};
      let sql_request = 'SELECT * FROM catalog';
      const xhr = new XMLHttpRequest();
      xhr.open('GET', `http://localhost:5000/getdata/${sql_request}`, true);
      xhr.send();
  
      xhr.onreadystatechange = () => {
        if (xhr.readyState != 4) return;
        dest_object = xhr.responseText;
      }
 
      return dest_object; 
}

Вызов этого метода возвращает пустой объект, потому что строка возврата функции return dest_object; выполняется не дожидаясь выполнения асинхронного запроса. Вопрос: как сделать так чтобы дожидалась? Запрос на синхронный менять нельзя. Всем кто откликнется заранее Спасибо.

@Mr_Sergo · 02.04.2019, 00:13

vvshnik14,

Используйте fetch

JavaScript
1
2
3
4
5
6
7
8
9
10
11
(async () => {
    console.log(await MyMethod_One());
})();
 
async function MyMethod_One() {
    let sql_request = 'SELECT * FROM catalog';
 
    let answer = await fetch('http://localhost:5000/getdata/' + sql_request),
        res = await answer.json();
    return res;
}

Добавлено через 2 минуты
только не совсем понял как вы get-параметры передаете

Добавлено через 1 минуту
если подставить в строку 'http://localhost:5000/getdata/' + sql_request вместо переменной в конце то что у вас содержится в переменной то получится какой-то странный адрес 'http://localhost:5000/getdata/SELECT * FROM catalog'
вы уверены что все правильно делаете?

@vvshnik14 · 02.04.2019, 00:24 **[ТС]**

Сообщение от Mr_Sergo

вы уверены что все правильно делаете?

Да, это запрос на express сервер. А само приложение пишу на React. За async спасибо, но реакт его не распознаёт(а если и распознаёт так только через подключение модулей - к этому прибегать не хочется)

@Mr_Sergo · 02.04.2019, 00:37

vvshnik14,

Тогда так можно

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let MyMethod_One = new Promise(resolve => {
    let sql_request = 'SELECT * FROM catalog';
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'handler.php?aaa=111', true);
    xhr.send();
 
    xhr.onreadystatechange = () => {
        if (xhr.readyState != 4) return;
        resolve(xhr.responseText);
    }
});
 
MyMethod_One.then(res => {
    console.log(res);
});

Адрес только свой укажите и переменную впишите в адрес

@vvshnik14 · 02.04.2019, 00:37 **[ТС]**

был неправ async await в react работают, пока не понимаю как они работают, но разберусь. Но первоначальный вопрос пока остаётся открытым...
надо идти спать, потом обязательно отпишусь, за ответы спасибо

@Mr_Sergo · 02.04.2019, 00:54

vvshnik14,

9-ую строку так перепишите что бы объект получать

JavaScript
1
resolve(JSON.parse(xhr.responseText));

Добавлено через 9 минут
или так что бы можно было аргументы передать при необходимости

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let MyMethod_One = () => new Promise(resolve => {
    let sql_request = 'SELECT * FROM catalog';
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'handler.php?aaa=111', true);
    xhr.send();
 
    xhr.onreadystatechange = () => {
        if (xhr.readyState != 4) return;
        resolve(JSON.parse(xhr.responseText));
    }
});
 
MyMethod_One().then(res => {
    console.log(res);
});

@amr-now · 02.04.2019, 11:21

vvshnik14, Mr_Sergo, раз нам упорно нравится класс XMLHttpRequest
и мы хотим приспособить его для async/await и грамотной обработки ошибок в try...catch, тогда:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <script>
        class Loader {
            getAsync(url) {
                return new Promise((resolve, reject) => {
                    let xhr = new XMLHttpRequest();
                    xhr.open("GET", url);
 
                    xhr.onload = () => {
                        if (xhr.status === 200) {
                            resolve(xhr.response);
                        }
                        else {
                            reject(new Error(`${xhr.status}: ${xhr.statusText}`));
                        }
                    };
                    xhr.onerror = () => {
                        reject(new Error(`Ошибка сети. Сервер не отдал код ошибки.`));
                    };
                    xhr.send();
                });
            }
 
            async MyMethod_One() {
                let sql_request = 'SELECT * FROM catalog';
                return JSON.parse(await this.getAsync(`http://localhost:3000/getdata/${sql_request}`));
            }
        }
 
        // Терминальная ловушка цепочки вложенных асинхронных вызовов
        (async function main() {
            try {
                // Дождаться результата асинхронной функции
                let result = await new Loader().MyMethod_One();
 
                console.log(result);
            }
            catch (e) {
                console.log(e);
            }
        })();
    </script>
</body>
</html>

У меня здесь сервер на 3000 порту. Если надо, то подправить.
----
Хотя да, fetch покороче приспосабливать.

@vvshnik14 · 04.04.2019, 11:37 **[ТС]**

amr-now, никак не могу освоить промисы, а именно не могу понять как вытащить наружу значение находящееся в resolve.
Поправьте меня в пояснении этого кода:

JavaScript
1
2
3
4
async MyMethod_One() {
                let sql_request = 'SELECT * FROM catalog';
                return JSON.parse(await this.getAsync(`http://localhost:3000/getdata/${sql_request}`));
            }

getAsync - функция которая возвращает промис(объект Promise), а не xhr.response(текст ответа на http запрос)?
Я не понимаю на каком этапе мы уже имеем дело не с объектом Promise, а с [[PromiseValue]].

Добавлено через 7 минут

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
async function f() {
 
  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("значение"), 1000)
  });
 
  let result = await promise; // wait till the promise resolves (*)
 
  alert(result); // "значение" 
  
  return result; // [object Promise]
}

Почему alert возвращает то что находиться внутри промиса, а return - возвращает промис?

@amr-now · 04.04.2019, 12:14

vvshnik14, getAsync(url) возвращает промис с непосредственными данными из xhr.response или ошибкой. Одно из двух.
Соответственно, try...catch в случае нормального безошибочного выполнения инструкций имитирует последовательное выполнение инструкций, как будто никаких промисов нет. (await только иногда мелькает перед глазами )

А в случае любой ошибки мы попадаем в блок catch конструкции try...catch

Сообщение от vvshnik14

Почему alert возвращает то что находиться внутри промиса, а return - возвращает промис?

return возвращает само значение, а не промис.

Промис возвращает сама async-функция из автоматически сгенерированного компилятором конечного автомата.

Сообщение от vvshnik14

Я не понимаю на каком этапе мы уже имеем дело не с объектом Promise, а с [[PromiseValue]].

Мышой в VS Code надо наводить на разнообразные названия. В квесты играли? Здесь то же самое. IntelliSense показывает типы в всплывающих подсказках.

@vvshnik14 · 05.04.2019, 12:32 **[ТС]**

Сообщение от amr-now

return возвращает само значение, а не промис.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
async function f() {
 
  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("hello!"), 1000)
  });
 
  let result = await promise; // wait till the promise resolves (*)
 
  alert(result); // hello!
  
  return result;
}
 
 
console.log(f()); // [object Promise] {}

Новые блоги и статьи Все статьи Все блоги /
Вывод данных через динамический список в справочнике Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .	Функция заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .
Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем	10 пpимет, которые всегда сбываются Maks 31.03.2026 1. Чтобы, наконец, пришла маршрутка, надо закурить. Если сигарета последняя, маршрутка придет еще до второй затяжки даже вопреки расписанию. 2. Нaдоели зима и снег? Не надо переезжать. Достаточно. . .	Перемещение выделенных строк ТЧ из одного документа в другой Maks 31.03.2026 Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .	Functional First Web Framework Suave DevAlt 30.03.2026 Sauve. IO Апнулись до NET10. Из зависимостей один пакет, работает одинаково хорошо как в режиме проекта так и в интерактивном режиме. из сложностей - чисто функциональный подход. Решил. . .

@vvshnik14 6 / 6 / 0 Регистрация: 26.06.2016 Сообщений: 68
	02.04.2019, 00:37 [ТС]
	был неправ async await в react работают, пока не понимаю как они работают, но разберусь. Но первоначальный вопрос пока остаётся открытым... надо идти спать, потом обязательно отпишусь, за ответы спасибо 0