Как правильно вернуть результат из функции async / await?

Question

Как правильно вернуть результат из функции async / await?

1

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

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

  getName = async () => {
    const request = await fetch(apiUrl)
    const data = await request.json()

    return data.response.name
  }

Я вызываю функцию позже

const name = getName()

Но name это обещание, а не имя.

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

РЕДАКТИРОВАТЬ - В ответ на @Paulpro я обновил свой вопрос ниже...

При условии, что с асинхронной функцией все в порядке, вопрос в том, как мне сохранить значение.

const name = getName()

"имя" теперь обещание, поэтому я обычно делаю что-то вроде этого...

getName().then(name => setName(name))

но как мне сделать const name === возвращаемое имя?

Ronald 27 апр. 2019, в 03:47

Источник

5

Вы уже делаете это правильно. Функции JavaScript возвращаются синхронно, поэтому вы не можете вернуть значение, полученное асинхронно; это было бы путешествие во времени. Лучшее, что вы можете сделать, это вернуть обещание.
Paulpro 27 апр. 2019, в 00:57
0

Вы не можете синхронно назначать из асинхронного кода и можете использовать его немедленно. Вы должны сделать это и использовать его в каком-либо name = await getName() или использовать присвоение в другой асинхронной функции и await его, например, name = await getName()
Patrick Evans 27 апр. 2019, в 01:28
0

Я думаю, вы не можете использовать это (так, как вы хотели), вы хотите, чтобы он вел себя как функция синхронизации, но, к сожалению, она асинхронная. так что я не могу нарушить встроенное правило.
Saikat Chakrabortty 27 апр. 2019, в 01:30
0

асинхронность (независимо от того, используется ли async / await или нет) похожа на вирус. Как только вы используете его (и вам нужно для асинхронных задач, таких как AJAX, например), он заражает весь код, который его использует - вы не можете вылечить его, вы просто должны жить с этим
Jaromanda X 27 апр. 2019, в 02:07

Показать ещё 2 комментария

Теги:

javascript

reactjs

async-await

1 ответ

Ещё вопросы

Вы уже делаете это правильно. Функции JavaScript возвращаются синхронно, поэтому вы не можете вернуть значение, полученное асинхронно; это было бы путешествие во времени. Лучшее, что вы можете сделать, это вернуть обещание.
Вы не можете синхронно назначать из асинхронного кода и можете использовать его немедленно. Вы должны сделать это и использовать его в каком-либо name = await getName() или использовать присвоение в другой асинхронной функции и await его, например, name = await getName()
Я думаю, вы не можете использовать это (так, как вы хотели), вы хотите, чтобы он вел себя как функция синхронизации, но, к сожалению, она асинхронная. так что я не могу нарушить встроенное правило.
асинхронность (независимо от того, используется ли async / await или нет) похожа на вирус. Как только вы используете его (и вам нужно для асинхронных задач, таких как AJAX, например), он заражает весь код, который его использует - вы не можете вылечить его, вы просто должны жить с этим

Todd Chaffee · Answer 1 · 2019-04-27T00-11-00.000Z

как сделать const name === возвращаемое имя?

Используя const name = await getName().

Это означает, что вы должны использовать его внутри async функции.

Итак, ваш подход использует:

getName().then(name => setName(name))

Скорее всего, это лучший способ сделать это, но это действительно зависит от остальной части вашего кода.

Я имею в виду, что вы могли бы сделать это так:

let name;

getName = async () => {
  const request = await fetch(apiUrl)
  const data = await request.json()

  name = data.response.name;
}

Когда (и если) оба ваших асинхронных запроса завершатся, у вашей переменной name будет результат. Но нет никаких гарантий относительно сроков этого. В зависимости от приложения может быть хорошо, если вы инициализируете свою переменную следующим образом:

let name = 'Loading...';

Хорошо, я получаю все ваши ответы. Я думаю, что вы правы, что тот, что с getName().then(name => setName(name)) подходит, потому что помещение его в асинхронную функцию создаст побочный эффект. Таким образом, getName остается чистой функцией, которую можно использовать в других местах, и ответ может быть обработан вне функции. (Жаль, что я не был уверен в справедливости того, что я только что сказал - смеется)
На самом деле, я только что понял, что моя getName() не может быть чистой функцией, потому что она выполняет вызов API, который она не контролирует. Однако, по крайней мере, он не будет изменять какие-либо внешние переменные, к чему я стремился. Я помещаю все в try / catch, чтобы он либо возвращал значение name, либо сообщение об ошибке.
@ Рональд, да, лучше не изменять внешние переменные внутри функции getName() которая должна оставаться верной своему имени, а просто получить имя и вернуть его. Похоже, вы достаточно четко думаете о качестве кода.
Вы также можете снова использовать await, EG setName( await getName( ) ) , но это должно быть в другой async функции, поскольку вы не можете использовать await вне ее. Это обычно то, что вы хотите в любом случае, хотя.
или если вы хотите, чтобы имя было в const: const name = await getName( ); ,
@Ronald В любом случае вам не нужно изменять getName, и вы правы, что вам не следует присваивать свободную переменную внутри getName.