Как передать значение во внешнюю переменную?

Question

[Данил Самодуров]

Здравствуйте. Почему в этом коде alert вне .then() выводит значение undefined, хотя сама переменная объявлена вне этой конструкции.

<meta charset="utf-8">
<script type="text/javascript">
    var USD
    fetch('https://www.cbr-xml-daily.ru/daily_json.js')
        .then(data => data.json(data))
        .then(({
            Valute: {
                USD
            }
        }) => {

            USD = `${USD.Value}`
            alert(USD)
        })
    alert(USD)

</script>

Мне нужно будет дальше по коду работать с этой переменной. JS знаю плохо. В гугле ответ так и не нашел

Answer 1

[Алексей Ярков]

Потому что асинхронные операции так работают. Используйте async/await для удобства.

Comments

[Данил Самодуров]

Не могли бы вы показать как работает async/await в моем случае. Я – питонист, JS для меня – дремучий лес. Учусь на вызываемых ошибках. Я понял только, что async/await работает с промисами. Перестроил код так:

<meta charset="utf-8">
<script type="text/javascript">
    var EUR
    
    var USD = fetch('https://www.cbr-xml-daily.ru/daily_json.js').then(response => response.json()).then(data => data.Valute.USD.Value);
    console.log(USD)

</script>

В выводе объект Promise. Раскрываю в консоли и вижу, что нужное мне значение переменной содержит [[PromiseResult]]: 76.4667. Как до него добраться?

[Алексей Ярков]

Данил Самодуров, посмотрите на эту статью. Если останутся вопросы - подскажу ))

[Данил Самодуров]

Алексей Ярков, как я понял, мне нужно сделать так

<meta charset="utf-8">
<script type="text/javascript">
    async function getJSON(resource) {
        const  response = await fetch(resource)
        const dataJSON = await response.json()
        //console.log(dataJSON)
        return dataJSON
    }
    var USD = getJSON('https://www.cbr-xml-daily.ru/daily_json.js').then(dataJSON => dataJSON.Valute.USD.Value)
    console.log(USD)

</script>

Но в вводе все равно
Promise {}
__proto__: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: 76.4667

хотя внутри функции закомментированный console.log(dataJSON) выводит именованный массив.

[Алексей Ярков]

Данил Самодуров, вам надо вот так:
var USD = await getJSON
Но await будет работать только внутри async функции:

async function getJSON(url) {
        const  response = await fetch(url)
        return await response.json()
}
(async () => {
    const dataJSON = await getJSON('https://www.cbr-xml-daily.ru/daily_json.js')
    console.log(dataJSON.Valute.USD.Value)
})()

[Данил Самодуров]

Алексей Ярков, я понял что, await не работает вне async функции . Ваш код выводит нужное значение в консоль, но как передать сначала это значение в переменную USD, а уже потом вывести ее – я так и не понял.

[Вадим]

Данил Самодуров, суть в том, что когда Вы пишите так:

var USD = getJSON('https://www.cbr-xml-daily.ru/daily_json.js').then(dataJSON => dataJSON.Valute.USD.Value)
console.log(USD)

То у вас начинает выполняться асинхронная операция, пока она выполняется поток выполнения не блокируется и идёт дальше. Так как переход к следующей строке кода быстрее чем любая асинхронная операция, то вам в консоль и выводит Promise. Если вы хотите сохранить значение в переменную, и нужно либо использовать async\await:

async function getJSON(url) {
        const  response = await fetch(url)
        return await response.json()
}
var USD  =  (async () => await getJSON('https://www.cbr-xml-daily.ru/daily_json.js').then( rezult=> rezult.Valute.USD.Value))()

Либо переписать ваш код на промисах так:

var EUR;
var USD;
    
fetch('https://www.cbr-xml-daily.ru/daily_json.js')
  .then(response => response.json())
  .then(data => { USD = data.Valute.USD.Value });

[Данил Самодуров]

Вадим, я пробовал уже так. В первом случае опять-таки выходит объект promise, а во втором, если добавить console.log(USD) – indefined.

[Вадим]

Данил Самодуров, Так это зависит от того, в каком месте вы делаете console.log. Если не в .then то всё правильно и я описал почему так происходит в начале первого сообщения.

[Вадим]

Данил Самодуров, Алексей Ярков показал Вам как вывести в консоль данные после запроса. Там же можно сделать и присваивание значения.

[Данил Самодуров]

Вадим, хорошо, разрешите тогда вернуться к первоначальному вопросу: как мне присвоить внешней переменной USD, которую я буду использовать дальше, значение, находящееся в источнике https://www.cbr-xml-daily.ru/daily_json.js
Мне даже не нужно выводить это значение. Мне нужно чтобы эта переменная хранила значение 76.4667, полученное из именованного массива из https://www.cbr-xml-daily.ru/daily_json.js

[Вадим]

Данил Самодуров, Вы хотите решать асинхронную задачу с синхронным подходом. Это так не работает, а я не знаю всего, что Вы хотите сделать. В примере, который я вам привёл последним, где ваш переписанный код на промисах, можете так же вызывать свою функцию-точку входа, например .then( data => присваивание значения; startWork() )
А функция StartWork описана ниже и будет доставать значение переменных из замыкания. Но это не совсем "взрослый" код.
Типа так:

var usd;

function startWork(promiseData) {
 console.log(usd)
}

fetch('https://www.cbr-xml-daily.ru/daily_json.js')
  .then(response => response.json()) // получили данные асинхронно по сети
  .then(data => { usd = data.Valute.USD.Value; return data }) // сохранили данные в переменную и вернули полный набор данных, полученных по сети, чтобы они были доступны дальше в цепочке промисов
  .then(startWork) // вызвали функцию, работающую с "внешней" переменной.

Асинхронный код на промисах выглядит примерно так:

.getData()
  .then(transformData)
  .then(workWithData)

И в workWithData уже делаете всё необходимое. Таким образом, данные передаются из промиса в промис по цепочке через return.
Если вам нужно получить данные из нескольких источников параллельно, но продолжить работу после того, как все запросы завершаться, то есть Promise.All([Promise, Promise])