Как использовать fetch с async / await?

Question

Я начинаю с того, что не уверен на 100%, что это проблема, я имею в виду использование await и async.

Это сценарий:

Я запускаю это при первой загрузкестраницы, и работает нормально, я получаю data:

    externalContent(url);

    function externalContent(url) {
      fetch(url)
      .then(res => res.json())
      .then(data => {
        ...cool data...
      });
    }

Но тогда мне нужно иметь возможность нажать кнопку и снова запустить эту функцию с fetch

Поэтому я делаю

    $(".alm-filters--button").on("click", function() {
      externalContent(url);
    }); 

Но когда я нажимаю, выдается ошибка на .then(res => res.json())

Ошибка говорит: Uncaught (в обещании) TypeError: Cannotчитать свойство then для неопределенного

Я полагаю, что существует асинхронная проблема, я пытался, но я недостаточно знаю об использовании async и await, но я пытался:

    async function externalContent(url) {
      await fetch(url)
      .then(res => res.json())
      .then(data => {
         ...cool data...
      });
    }

Но эт, я получаю ту же ошибку.

Answer 1

Ссылаясь на , эта статья должна решить вашу проблему.Смотрите также фрагмент.

async function exampleFetch() {
    const response = await fetch('https://reqres.in/api/users/2');
    const json = await response.json();
    console.log(json);
}

exampleFetch()

await заменяет .then(), поэтому при использовании await fetch вам вообще не нужно использовать .then().

Вот еще пара ответов, которые касаются более или менее той же проблемы:

1 - Как получить доступ к значениям моей функции асинхронной выборки?[дубликаты]

2 - API извлечения с использованием асинхронного / ожидаемого возвращаемого значения неожиданно [дубликаты]