Я использую Async/жду. Почему моя функция возвращает обещание?

Обработка асинхронна стала намного проще благодаря Асинхронизация / ждет шаблон. Это делает асинхронные задачи почти такими же простыми, как и обычные синхронные операции:

async function asyncCheckPokemon() {
  const response = await fetch("https://pokeapi.co/api/v2/pokemon/25");
  const pikachuJSON = await response.json();

  // Prints "Look mum, no callbacks! Pokémon #25 is pikachu"
  console.log(
    `Look mum, no callbacks! ` +
    `Pokémon #${pikachuJSON.id} is ${pikachuJSON.name}`
  );
}
asyncCheckPokemon();

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

Теперь давайте сделаем небольшое изменение, чтобы функция возвращает строку вместо печати:

async function asyncCheckPokemon() {
  const response = await fetch("https://pokeapi.co/api/v2/pokemon/25");
  const pikachuJSON = await response.json();

  return (
    `Look mum, no callbacks! ` +
    `Pokémon #${pikachuJSON.id} is ${pikachuJSON.name}`
  );
}

const pikachuMessage = asyncCheckPokemon();

Каково значение переменной Pikachumessage ? Если вы сказали, что это строка «Посмотрите, мама, нет обратных вызовов! Pokémon #25 – это Пикачу, это неправильно. Переменная – это обещание, которое решает эту строку. Но почему?

Асинхронизация / ждет Паттерн работает так: когда вы выполняете асинхронную задачу, используя Ждите Ключевое слово, функция, которая содержит вызов, должна быть «приостановлена», пока асинхронная задача не закончится.

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

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

Теперь, как вы справляетесь Асинхронизация функции, которые возвращают значения? Вы должны назвать это из другого Асинхронизация функция, и вы должны использовать ждет Чтобы позвонить Анкет Это должно выглядеть так:

async function asyncCheckPokemon() {
  const response = await fetch("https://pokeapi.co/api/v2/pokemon/25");
  const pikachuJSON = await response.json();

  return (
    `Look mum, no callbacks! ` +
    `Pokémon #${pikachuJSON.id} is ${pikachuJSON.name}`
  );
}

async function printPikachuMessage() {
    const pikachuMessage = await asyncCheckPokemon();

    // Prints "Look mum, no callbacks! Pokémon #25 is pikachu"
    console.log(pikachuMessage);
}

printPikachuMessage();

Но что, если вы хотите позвонить, получить значение из Асинхронизация Функция на верхнем уровне (то есть не внутри функции)? В Node.js и Chrome вы можете, если сценарий является модулем ES6. В node.js убедитесь, что расширение файла составляет “.mjs”, а для Chrome добавьте Тип = "Модуль" атрибут к <Скрипт> ярлык.

Но если вы не можете использовать модули, вам придется использовать Асинхронизация Функция, которая ничего не возвращает, а затем вызовет эту функцию на верхнем уровне. Для этого вы можете использовать экспрессию функции сразу внедренной функции (IIFE).

п.с. Вам понравилось то, что вы читали? Каждую неделю я отправляю электронное письмо с бесплатными советами и идеями, чтобы стать лучшим DavaScript Dev. Если вам интересно, Нажмите здесь, чтобы подписаться Анкет

Оригинал: “https://dev.to/nicozerpa/i-m-using-async-await-why-does-my-function-return-a-promise-hh9”