Вопрос по асинхронному js?

Question

[dch3]

Есть класс Lists

class Lists {

constructor (items, failMessage) {
        this.items = items;
        this.failMessage = failMessage;
    }

async requestToServer(url) {

        let response = await fetch(url, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json;charset=utf-8',
            });

        if (response.ok) this.items = await response.json();
        else if (response.status == 422) this.failMessage = await response.json();
    }

sendNewData() {
...

 ( async () => await this.requestToServer(url) )();

console.log( this.failMessage);

}

}

Проблема заключается в том, что интерпретатор js почему-то переходит к строке console.log( this.failMessage); , не дождавшись завершения выполнения в строке ( async () => await this.requestToServer(url) )();.

И в результате в консоль выводится значение свойства failMessage равное null даже когда статус ответа от сервера 422( что должно вывести текст ошибки. пересылаемый сервером).
Если же я перепишу строку console.log( this.failMessage); модифицировав ее Timeout - ом - то все прекрасно отрабатывает.
Подскажите пожалуйста, почему так?

Comments

[dch3]

@risejs
@Mike_Ro
Понял. Спасибо!
Я думал, что наличие await останавливает интерпретатор вообще в скрипте, не учитывая область видимости функции async

[Михаил Р.]

dch3,
async - сделать участок кода асинхронным.
await - дождаться результата асинхронного участка кода.

[Михаил Р.]

dch3,

Я думал, что наличие await останавливает интерпретатор вообще в скрипте, не учитывая область видимости функции async

await блокирует только выполнение кода внутри текущей асинхронной функции до тех пор, пока промис, переданный в await, не будет разрешен. Это позволяет синхронно ожидать и получать результат асинхронных операций.

Answer 1

[Михаил Р.]

async sendNewData() {
    await this.requestToServer(url);
    console.log(this.failMessage);
}

Весь исправленный код, втч. синтаксические ошибки:

class Lists {
    constructor(items, failMessage) {
        this.items = items;
        this.failMessage = failMessage;
    }

    async requestToServer(url) {
        let response = await fetch(url, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json;charset=utf-8',
            }
        });

        if (response.ok) {
            this.items = await response.json();
        } else if (response.status == 422) {
            this.failMessage = await response.json();
        }
    }

    async sendNewData(url) {
        await this.requestToServer(url);
        console.log(this.failMessage);
    }
}

Answer 2

[Rise]

Потому что await работает внутри функции async, а console.log у вас находится вне этой функции.