Asynchronous-JavaScript/AjaxFetch.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>AJAX</title>
</head>

<body>

    <h1>AJAX FETCH</h1>


    <script>

        function getWeather(woeid) {
            fetch(`https://crossorigin.me/https://www.metaweather.com/api/location/${woeid}/`)

                .then(result => {
                    // console.log(result);
                    return result.json();
                })

                .then(data => {
                    // console.log(data);
                    const today = data.consolidated_weather[0];
                    console.log(`Temperatures today in ${data.title} stay between ${today.min_temp} and ${today.max_temp}.`);
                })

                .catch(error => console.log(error));
        }


        getWeather(2487956);
        getWeather(44418);

        // async/await way
        async function getWeatherAW(woeid) {
            try {
                const result = await fetch(`https://crossorigin.me/https://www.metaweather.com/api/location/${woeid}/`);

                const data = await result.json();
                const tomorrow = data.consolidated_weather[1];

                console.log(`Temperatures tomorrow in ${data.title} stay between ${tomorrow.min_temp} and ${tomorrow.max_temp}.`);

                return data;

            } catch (error) {
                alert(error);
            }
        }

        getWeatherAW(2487956);

        let dataLondon;
        getWeatherAW(44418).then(data => {
            dataLondon = data
            console.log(dataLondon);
        });

    </script>

</body>

</html>