JS Не присваивается значение переменной

Question

var bal = 0;
    fetch('url', {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ userid: userid })
    })
    .then(res => res.json())
    .then(data => bal = data.bal);
console.log(bal);

Выводит 0 т.е значение не присваивается( почему? в data.bal данные есть мне нужно использовать эту переменную в react

Answer 1

Метод fetch возвращает Promise который выполнится в будущем. В то время как console.log(bal); выполнится сейчас. Единственный вариант проверить bal - это в then(...).

var bal = 0;
fetch('url', {
    method: 'POST',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        userid: userid
    })
})
    .then(res => res.json())
    .then(data => bal = data.bal)
    .then(() => console.log(bal));

setTimeout тут не поможет, так как сервер может отвечать очень долго. Или вообще упасть с ошибкой.

Если метод fetch вызывается в async функции, то можно использовать ключевое слово await чтобы в рамках этой функции значение пришло "синхронно".

async function fetchBalData() {
    let bal = 0;
    try {
        bal = await fetch('url', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ userid })
        }).then(res => res.json());
    } catch (err) {
         console.error(err);
    }
    console.log(bal);
}

БЛОГ НА HUSL

JS Не присваивается значение переменной

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