Не совсем понимаю как работают промисы в JS

Question

Экспериментирую с промисами и async/await в javascript, но не совсем понимаю как работает данный скрипт:

let promise = new Promise(()=> {
    setTimeout(()=> console.log('Hi'), 3000)
});
function sayHi2(){
    console.log('HiHi');
}                         
async function f() {
    await promise;
    sayHi2();
}                          
f();

Он у меня выводит:

Промис отрабатывает как и надо, спустя 3 секунды, но он не отрабатывают функцию sayHi2(), хотя я ожидаю что сначала отработает промис, то есть выведет информацию спустя 3 секунды, а потом отработает функция sayHi2(). Почему так происходит и как можно получить ожидаемый результат?

Answer 1

У промисов 3 состояния: pending (ожидание), fullfilled (выполнен успешно) и rejected (выполнен с ошибкой). Необходимо использовать resolve (которая ставит состояние промиса на fullfilled), а иначе ваш Promise находится в состоянии pending и ничего не происходит. Правильно будет вот так:

let promise = new Promise((resolve, reject)=> {
    setTimeout(()=> resolve(console.log('Hi')), 3000)
});
function sayHi2(){
    console.log('HiHi');
}                         
async function f() {
    await promise;
    sayHi2();
}                          
f();

https://learn.javascript.ru/promise

Answer 2

/*
Что такое промис: это такая штука, которая выполняет некий асинхронный код
и возвращает некоторые данные тогда, когда этот код будет выполнен.
Чтобы вернуть эти данные нужно для начала правильно создать промис:
Промис принимает callback с двумя параметрами resolve и reject, которые в свою очередь 
тоже являются функциями. 
*/
const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('Hi'); 
    /*
            Мы вызываем функцию resolve и передаем в неё строку "Hi". Когда промис
      выполниться мы сможем получить данные которые мы передали в функцию resolve, в нашем случае
      это строка hi
    */
    }, 3000)
})
function sayHi2(){
    console.log('HiHi');
}       
/*
Что происходит сдесь: 
async - дает знать движку что в этой функции будет выполняться 
асинхронный код. Так же это нам даст доступ к ключевому слову await

await(подождать) - приостанавливает выполнение функции до того момента, 
пока асинхронная операция не будет выполнена
*/
async function f() {
    console.log(await promise);
    sayHi2();
}                          
f();

БЛОГ НА HUSL

Не совсем понимаю как работают промисы в JS

Ответы (2 шт):