meteo.js：21 Uncaught SyntaxError：await仅在异步函数中有效

Question

I have a problem in my code I do not see the weather API appear in my code

Uncaught SyntaxError: await is only valid in async function 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

Here is a quote from Mozilla Developers :

An async function can contain an await expression that pauses the execution of the async function and waits for the passed Promise's resolution, and then resumes the async function's execution and returns the resolved value.

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

Answer 2

You can only use await in an async function - to avoid making your whole code an async function, use IIFEs like so:

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

Because you're still using .then chaining, you could just remove the await part completely and just use .then for continuity.

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