Как работает finally и then в Promise?

Question

[GNG999]

Есть вот такая функция в коде

fetch(`/api/checkout/${method}?` + new URLSearchParams({ service: id }), {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(buildRequestBody(values, cartStore, mapStore)),
        })
            .then((response) => response.json())
            .then(({ cart }) => cartStore.setCart(cart))
            .finally(() => setPreloader(false));
    };

разве тут then
then
finally не гарантирует того, что код будет ждать все это - те после того, как обработаются then и finally - код пойдет дальше ?

Answer 1

[Алексей Уколов]

Смотря о каком коде вы говорите. response.json() будет ждать окончания запроса, setCart будет ждать json, setPreloader будет ждать их обоих или падения.
Но если вы что-то напишете вне then, после fetch, оно ничего ждать не будет (если бы так работало, то зачем вообще нужен был бы then?).

Comments

[GNG999]

а finally как будет себя вести ? Чат гпт выдал такое:
метод finally не гарантирует ожидание завершения предыдущих операций then перед продолжением выполнения кода.

[Алексей Уколов]

Он будет себя вести так, как я описал в ответе.

[GNG999]

а при async await будет же ожидание ?

[Алексей Уколов]

Будет.
Вы бы могли просто написать два примера кода, запустить их и получить сразу ответы на все вопросы. Это не просто полезнее для усвоения знаний, но ещё и тупо быстрее.

[GNG999]

Алексей Уколов в сложных кейсах начинаешь путаться и при возникновении вопросов порой забываешь воспроизвести на более простых, я прочел инфу с чата gpt и решил уже здесь проверить насколько она верна

[GNG999]

Алексей Уколов, вот что он написал
метод finally не гарантирует ожидание завершения предыдущих операций then перед продолжением выполнения кода.

[Алексей Уколов]

Я не знаю что хотел вам сказать бездумный генератор текста. Откройте MDN, там всё написано понятно и с примерами.

[WbICHA]

GNG999,

я прочел инфу с чата gpt

Вот до тех пор, пока ты будешь слушать это недоразумение, у тебя и будут такие... вопросы. Он может помочь сгенерировать новые данные, а так же сэкономить время, если ты сам отлично разбираешься в теме.
ГПТ — это генератор текста, а не генератор правильных ответов. Он вообще никак не гарантирует, что даст правильный ответ, а скорее даже наоборот, почти гарантированно он в чём-то облажается.

[GNG999]

WbICHA, Я это понял, уже который раз так, просто проверял насколько он хорош, насколько он правильно генерит данные с документации и стэка

[GNG999]

GNG999, его главный минус - иллюзия правильности, заставляющая пользователя забывать перепроверять инфу

Answer 2

[Rsa97]

Никто ничего ждать не будет. Исполнение кода пойдёт дальше до самого конца функции.
Когда промис, который вернул fetch, перейдёт в состояние resolved, в очередь микротасков будет добавлен вызов каллбэк-функции из первого then. Если промис вернёт rejected, то вызова не будет, вернётся новый промис в rejected.
Когда промис из первого then перейдёт в состояние resolved, в очередь микротасков будет добавлен вызов каллбэк-функции из второго then. Если промис вернёт rejected, то вызова не будет, вернётся новый промис в rejected.
Когда промис из второго then перейдёт в состояние resolved или rejected, в очередь микротасков будет добавлен вызов каллбэк-функции из finally.

Answer 3

[iljaGolubev]

fetch(url)
    .then((response) => response.json())
    .then(({ cart }) => cartStore.setCart(cart))
    .catch(e=>console.log(e))
    .finally(() => setPreloader(false));

finally выполнится после того как fetch и цепочка then(catch) выше полностью выполнится.
Независимо от результата.
По сути, это тоже самое что написать

fetch(url)
    .then((response) => response.json())
    .then(({ cart }) => {cartStore.setCart(cart); setPreloader(false)} )
    .catch(e=>{console.log(e); setPreloader(false)})