Как использовать переменную за пределами async function?

Question

[DeniSidorenko]

Добрый день, подскажите пожалуйста есть такой код

const urlChannel = 'https://www.googleapis.com/youtube/v3/channels?part=snippet&id=' + channelID + '&fields=items%2Fsnippet%2Fthumbnails&key=' + apiKey;

async function getChannel(){
      const urlChannelResult = await fetch(urlChannel)
      const jsonChannel = await urlChannelResult.json()
      const authorPhoto = jsonChannel.items[0].snippet.thumbnails.high.url;
      console.log(authorPhoto)
    }
    getChannel()

Как можно использовать константу authorPhoto за пределами функции?
p.S Код что выше - находится внутри цикла map, поэтому channelID каждый раз меняется..

Comments

[Vest]

Так сработает?

const urlChannel = 'https://www.googleapis.com/youtube/v3/channels?part=snippet&id=' + channelID + '&fields=items%2Fsnippet%2Fthumbnails&key=' + apiKey;

async function getChannel(){
      const urlChannelResult = await fetch(urlChannel)
      const jsonChannel = await urlChannelResult.json()
      const authorPhoto = jsonChannel.items[0].snippet.thumbnails.high.url;
      console.log(authorPhoto)

      return authorPhoto;
}

const usePhoto = await getChannel();

[Maxim Kirshin]

верни из функции переменную и все.

[WapSter]

Vest, await в не асинхронной функции вызовет синтаксическую ошибку.

[Dima Polos]

Как только ступили в асинхронность - назад дороги нет, все время придется работать в режиме async или then...

[Vest]

WapSter, да, верно. Но вопрос был про результат функции, как его использовать. Если же задача слать много данных в параллель, и обрабатывать результаты там же, то я бы посоветовал решение отсюда.

Answer 1

[Alex]

Как можно использовать константу authorPhoto за пределами функции?

Никак. Эта константа находится в излорованой области. И доступа к ней не получить.
Но:
Вы можете возвращать это значение из функции (рекомендуемый вариант)

async function getChannel(){
  ...
  return authorPhoto
}

Или вы можете сохранять её значение в переменную в более высокой области видимости (не рекомендуется):

let tempPhoto

async function getChannel(){
  ...
  tempPhoto = authorPhoto 
}

Comments

[WapSter]

В случае с возвращением асинхронная функция возвращает промис и попадаем в замкнутый круг)

[Владимир]

WapSter, а await зачем придумали ?

[WapSter]

Владимир, ну напиши мне пример кода, где await поможет тебе вернуть из асинхронной функции готовый результат.

[Владимир]

WapSter, Вернуть куда? Давай точнее с постановкой задачи. await внутри асинхронной функции используется и прекрасно возвращает

async function mokedFetch() {
  return Promise.resolve({
    item: 4
  })
}

async function getChannel() {
  const urlChannelResult = await mokedFetch()
  const authorPhoto = urlChannelResult.item;
  return authorPhoto
}

async function getResultFromAsync() {
  const res = await getChannel()
  console.log("1", res) 
  return res
}

getResultFromAsync().then(res => {
  console.log("2", res)
})

[WapSter]

Владимир, мда уж. Ты серьезно? И по твоему ты сейчас вернул готовый результат? Ты всего навсего дождался выполнения другой асинхронной функции и это не замкнутый круг?

async function getResultFromAsync() {
  console.log(await getChannel())
}

А я тебе про то, что ты не можешь вернуть готовый результат и записать к примеру в переменную, чтобы спокойно дальше с ней работать const item = getChannel()
Теперь перечитай мой коммент, и осознай, что я написал. И не морозь фигни лишь бы поспорить.

[Владимир]

WapSter, Еще раз, вернуть куда?
Я вернул значение в другую асинхронную функцию. await в принципе не работает в основном потоке.

[WapSter]

Владимир, о боже, а я о чем написал в первом комменте?

Еще раз, вернуть куда?

как это еще можно по другому понять, как обычная функция возвращает результат блин. Короче иди лесом.

Answer 2

[Владимир]

В основной поток асинхронная функция возвращает Promise. Ты не можешь в основном потоке подождать выполнения асинхроного кода, поэтому глобальная переменная - не вариант, она будет пустой до тех пор пока не выполнится асинхонный код. В основном потоке ты можешь обрабатывать результаты асинхронных функций учитывая что это Promise
https://developer.mozilla.org/en-US/docs/Web/JavaS...

Из твоей задачи не ясно в каком месте ты собираешся использовать эту переменную, так что однозначного ответа на твой вопрос - нет.

Answer 3

[Дмитрий Гололобов]

async function getChannel(urlChannel){
      const urlChannelResult = await fetch(urlChannel)
      const jsonChannel = await urlChannelResult.json()
      const authorPhoto = jsonChannel.items[0].snippet.thumbnails.high.url
      console.log(authorPhoto
     return authorPhoto
    }
[...].map(async el => {
     const authorPhoto = await getChannel(el.url)
     // ....
})

Comments

[Антон Антон]

Мне кажется, правильнее что-то типа const authors = await Promise.all([...].map(el => getChannel(el.url))

[Владимир]

Антон Антон, Ты не можешь в основном потоке использовать await, только внутри асинхронной функции

[Антон Антон]

Владимир, суть не в том, что это основной поток, а в том, что map вернет массив промисов, которые нужно еще разрешить. Либо внутри async функции, либо через .then()

Answer 4

[Надим]

Используйте вместо константы обычную переменную. Конечно, нужно будет потом быть внимательным, чтобы случайно не перезаписать полученную глобальную переменную, но как по мне, это не проблема.

Comments

[Владимир]

И что мы получим в консоли тут ?

const urlChannel = 'https://www.googleapis.com/youtube/v3/channels?part=snippet&id=' + channelID + '&fields=items%2Fsnippet%2Fthumbnails&key=' + apiKey;

let authorPhoto = ""

async function getChannel() {
  const urlChannelResult = await fetch(urlChannel)
  const jsonChannel = await urlChannelResult.json()
  authorPhoto = jsonChannel.items[0].snippet.thumbnails.high.url;
}
getChannel()
console.log(authorPhoto)

[WapSter]

Вообще дичь какая-то

[Надим]

Владимир, естественно это не будет работать, так как console.log(authorPhoto) сработает раньше, чем будет выполнены асинхронные функции, которые должны туда положить данные.

[Владимир]

Надим Закиров, Я к тому что если ты влез в асинхронные функции, то глобальная переменная - не вариант, если я правильно понял твой ответ.