Как получить результат выполнения промиса?

Question

[Andrey]

Есть следующий асинхронный код:

const checkGoodInCart = async (id) => {
    try {
        const response = await fetch(http://localhost:8000/cart);
        const data = await response.json();
        for (const item of data) {
            if(item.id === id) {
                return '<button>В корзине</button>'
            } else {
                return '<button>Добавить в корзину</button>'
            }
        }
    } catch (e) {
        console.log(e)
    }
};

Он должен использоваться при рендере карточки товара, т.е. в него передается id товара который рендрится на данный момент, и функция должна сверять, если ли такой id в бд, если есть, тогда должен возвращать html В корзине иначе Добавить в корзину, но если я просто вызываю функцию при рендере

использую литералы при рендере

<div class="product__button__wrapper">
                ${checkGoodInCart(item.id)}
            </div>

она возвращает промис, и вместо кнопки у меня написано [object Promise]

Подскажите как вернуть именно то, что указано в функции, т.е. строку с html

Я понимаю если мне нужен результат в консоль, то я пишу следующий код:

checkGoodInCart()
      .then(result => console.log(result))

Но нужно чтобы функция возвращала нужное значение строкой

Если это невозможно, хотя у меня есть такие подозрения что это невозможно, то каким путем мне можно пойти

Comments

[edward_freedom]

у тебя пример использования await в твоем же коде

Answer 1

[Дмитрий Беляев]

Тысячу раз уже на эту тему вопросы были...
Вам нужно понять суть асинхронности, промис на то он и промис, что это абстракция над значением в будущем, в момент вызова checkGoodInCart этого значения еще нет.
async/await это всего лишь сахар над промисами, await возвращает управление в event loop, "замораживая" функцию до того момента, пока промис переданный в await не скажет "значение готово, можешь забирать".

Единственный вариант здесь - сделать сам рендер асинхронным

<div class="product__button__wrapper">
                ${await checkGoodInCart(item.id)}
            </div>

Comments

[Andrey]

Я вот и пытаюсь понять суть асинхронности юзая их, гугля вопросы, и задавая их)
Касательно предложенного варианта, он заработал, но тогда даже если id совпадает, функция возвращает "Добавить в корзину" вместо "В корзине"... я не понимаю почему это так работает...

[WapSter]

Andrey, в документации к async черным по белому написано возвращает промис, а не значение. Проверяй условия у меня почему-то все нормально работает

[Дмитрий Беляев]

функция возвращает "Добавить в корзину" вместо "В корзине"... я не понимаю почему это так работает...

Andrey, у Вас return на первой итерации цикла не зависимо от условия, "В корзине" будет только в случае если id совпадет с самым первым элементом

P.S. такие проблемы вполне отслуживаются eslint
P.S.S. конструкция if-return-else - плохой тон, затрудняет чтение кода, после if-return не нужен else