Как работает асинхронный код?

Question

[kirillleogky]

// Создаётся объект promise
let promise = new Promise((resolve, reject) => {

    setTimeout(() => {
        // переведёт промис в состояние fulfilled с результатом "result"
        resolve("result");
    }, 1000);

});

// promise.then навешивает обработчики на успешный результат или ошибку
promise
    .then(
        result => {
            // первая функция-обработчик - запустится при вызове resolve
            alert("Fulfilled: " + result); // result - аргумент resolve
        },
        error => {
            // вторая функция - запустится при вызове reject
            alert("Rejected: " + error); // error - аргумент reject
        }
    );

Я хотел бы уточнить как работает асинхронность в данном примере.

Я правильно понял что данный код

setTimeout(() => {
        // переведёт промис в состояние fulfilled с результатом "result"
        resolve("result");
    }, 1000);

через 1 секунду сохранит в resolve значение "result"?

Но до того как пройдёт 1 секунда resolve отправляется сюда и ждёт сохранение "result"? А после того как 1 секунда пройдёт вызывает alert со значением resolve?

.then(
        result => {
            // первая функция-обработчик - запустится при вызове resolve
            alert("Fulfilled: " + result); // result - аргумент resolve
        },

Comments

[Сережа Ахен]

Для общего понимания посмотрите
https://youtu.be/5kAPExqSZ1I

Скажу лишь что никто там ничего не сохраняет, применимы несколько другие термины.

Answer 1

[Филипп Гапоненко]

Изначаль созданный вами промис находится в состоянии pending

Данный код

setTimeout(() => {
        // переведёт промис в состояние fulfilled с результатом "result"
        resolve("result");
    }, 1000);

Хранится в объекте промиса и будет вызван сразу, а когда будет вызван `resolve`, этот вызов стриггерит на объекте промиса событие изменения состояния.
Т.к. вызывается resolve то промис переходит в состояние fulfilled и значение из resolve передается в коллбек, который будет вызван внутри then.

Не уверен, что правильно понял суть вашего вопроса, но надеюсь это сможет помочь.

1. https://learn.javascript.ru/promise
   
2. https://habr.com/ru/company/mailru/blog/269465/
   

Comments

[kirillleogky]

Филипп Гапоненко Подскажите правильно ли я понял. Данный код

setTimeout(() => {
        // переведёт промис в состояние fulfilled с результатом "result"
        resolve("result");
    }, 1000);

Как бы "трансформируется" в такого типа код и выполняется?

setTimeout(() => {
        // переведёт промис в состояние fulfilled с результатом "result"
        resolve(alert("Fulfilled: " + "result");
    }, 1000);

[Филипп Гапоненко]

Cкорее в

setTimeout(() => {
        // переведёт промис в состояние fulfilled с результатом "result"
        resolve(
          {
          status: 'fulfilled',
          callback: function(resolvedValue) {  alert(resolvedValue); }
         }
        )
    }, 1000);

Answer 2

[hzzzzl]

javascript подчиняется модели Event Loop, скрипт выполняется "в одном потоке", в каждом цикле (tick) этого цикла проверяются все отложенные таймеры, все обработчики событий итд

// Создаётся объект promise
// не происходит ничего, просто сохраняется объект
let promise = new Promise((resolve, reject) => {
// МЕТКА №1 (см.ниже)
// выполняется setTimeout()
// цифра 1 на картинке, код сейчас здесь
    setTimeout(() => {
        // цифра 2 на картинке, через секунду (или когда у процессора будет время)
        // интерпретатор JS будет разбирать timer queue и выполнит коллбек resolve()
        // тем самым "разрешит" промис
        resolve("result");
    }, 1000);

});

// promise.then навешивает обработчики на успешный результат или ошибку
promise
// GOTO метка №1
    .then(
        result => {
            // первая функция-обработчик - запустится при вызове resolve
            // в Timer Queue (возможно) будет ссылка на эту функцию, и она вызовется с аргументом result
            alert("Fulfilled: " + result); // result - аргумент resolve
        },
        error => {
            // вторая функция - запустится при вызове reject
            // в Timer Queue (возможно) будет ссылка на эту функцию, и она вызовется с аргументом result
            alert("Rejected: " + error); // error - аргумент reject
        }
    );