meteo.js: 21 Uncaught SyntaxError: await действует только в асинхронной функции

Question

У меня есть проблема в моем коде. Я не вижу, чтобы API погоды отображался в моем коде

Uncaught SyntaxError: await действителен только в асинхронной функции meteo.js: 21

if (WithIP) {
  const ip = await fetch('https://api.ipify.org/?format=json%27')
    .then(resultat => resultat.json())
    .then(json => json.ip);

  ville = await fetch("http://api.ipstack.com/json/' + ip + '?access_key=' + access_key")
    .then(resultat => resultat.json())
    .then(json => json.city);

} else {
  ville = document.querySelector('#ville').textContent;
} 

{
  const meteo = await fetch('http://api.openweathermap.org/data/2.5/weather?q=Marseille&appid=33119b4a3fa1ad278805578d27ea15de&lang=fr&units=metric%27')
    .then(resultat => resultat.json())
    .then(json => json)

Answer 1

Вы можете использовать await только в функции async - чтобы избежать превращения всего кода в функцию async, используйте IIFE как:

const ip = (async () => await fetch('https://api.ipify.org/?format=json%27'))();

Поскольку вы все еще используете .then цепочка, вы можете просто полностью удалить часть await и просто использовать .then для непрерывности.

fetch('https://api.ipify.org/?format=json%27').then(resultat => resultat.json()).then(...);

Answer 2

Вот цитата из разработчиков Mozilla:

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

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function