Async and await

• Async/Await is just a syntax sugar built on top of promises
• Async/Await makes code look and behave a bit more like synchronous code
• It makes your code more readable and easier to understand and maintenance-friendly

IMPORTANT

Async/Await does not entirely replace promises, it's only a nicer way to get rid of the chained .then() handlers

Use promises with Async/Await

• Assume we have three promises and two regular (synchronous) function that have to be executed one after one, then the code lookt like this:

function makeRequest() {
    return promise1()
    .then((response1) => promise2())
    .then((response2) => regularFunction1())
    .then((data1) => promise3())
    .then((response3) => regularFunction2())
}
makeRequest();

• Converting this to async/await:
  • Add the keyword async in front of the function that contains one or more asynchronous function
  • Add the keyword await in front of the asynchronous function (not before regular functions) and add the resolved response to a variable

async function makeRequest() {
    const response1 = await promise1();
    const response2 = await promise2();
    const data1 =  regularFunction1();
    const response3 = await promise3();
    regularFunction2();
}
makeRequest();

User fetch() with Async/Await

A fetch() function can be written with Async/Await as stand-alone version:

async function fetchFunction() {
    const response = await fetch(url);
    if (!response.ok) {
        throw new Error(`An error has occurred: ${response.status}  ${response.statusText}`); // check for errors
    }
    return response.json();
}

async function otherFunction() {
    try {
        const data = await fetchFunction();
        // process the data inside this function
        // ...
    } catch (error) {
        console.error(error);
    }
}

• Or as a function where you do something with the data inside te function itself:

async function fetchFunction() {
    try {
        const response = await fetch(url);
        if (!response.ok) {
            throw new Error(`An error has occurred: ${response.status}  ${response.statusText}`); // check for errors
        }
        const data = await response.json();
        // process the data inside this function
        // ...
    } catch (error) {
        console.error(error);
    }
}

Error handling

• We can catch errors using try...catch just like in synchronous code

async function makeRequest() {
    try {
        let resovelved1 = await callPromise1();
        let resovelved2 = await callPromise2();
        let data1 =  regFunction1();
        let resovelved3 = await callPromise3();
        regFunction2();
    } catch (error) {
        console.error(error);
    }
}
makeRequest();

• Or use the catch() methode on the function that calls the async function

async function makeRequest() {
    let resovelved1 = await callPromise1();
    let resovelved2 = await callPromise2();
    let data1 =  regFunction1();
    let resovelved3 = await callPromise3();
    regFunction2();
}
makeRequest().catch (error) {
    console.error(error);
};

Examples

• Let's refactor some examples from the previous chapters to Async/Await

Asynchronous calculator

• Open es6/asyncAwait/calculator.html and es6/asyncAwait/calculator.js
• Compare the refactored code with the code from es6/promises/calculator.js

• There are multiple then() handlers in this solution, but only line 16 and line 24 refers to a promise
• The rest of them contains just normal (regular) functions

let x = 5;

const delay = (ms = 1000) => {
    return new Promise((resolve, reject) => {
        if (isNaN(ms)) {
            reject(new Error('Delay only except milliseconds'));
        } else {
            setTimeout(() => resolve(`waited for ${ms} ms`), ms);
        }
    });
};

console.log(`x = ${x}`);
// step 1
console.warn('Give me two seconds, first empty my coffee and then I will multiply x by 2');
delay(2000)
    .then((data) => {
        console.log(`%c ${data}`, 'color: blue');
        x *= 2;
        console.log(`x * 2 = ${x}`);
    })
    // step 2
    .then(() => console.warn("Give me a sec, I'm coming down and add 6 to x"))
    .then(() => delay()) // 1000 is the default value
    .then((data) => {
        console.log(`%c ${data}`, 'color: blue');
        x += 6;
        console.log(`x + 6 = ${x}`);
    })
    .then(() => {
        // step 3
        x -= 1;
        console.log(`x - 1 = ${x}`);
        // step 4 (output x to DOM)
        document.querySelector('pre').innerText = `x = ${x}`;
    })
    .catch((error) => console.error(error));

• Line 15: prefix the function calculator() with the keyword async because it contains (two) references to a promise
• Line 19 and line 25: prefix the promise delay() with the keyword await so the next lines of code have to wait until the promise is resolved
  Place the resolved values in the variable data to use then later in the code

let x = 5;

const delay = (ms = 1000) => {
    return new Promise((resolve, reject) => {
        if (isNaN(ms)) {
            reject(new Error('Delay only except milliseconds'));
        } else {
            setTimeout(() => resolve(`waited for ${ms} ms`), ms);
        }
    });
};

console.log(`x = ${x}`);

async function calculator() {
    try {
        // step 1
        console.warn('Give me two seconds, first empty my coffee and then I will multiply x by 2');
        let data = await delay(2000);
        console.log(`%c ${data}`, 'color: blue');
        x *= 2;
        console.log(`x * 2 = ${x}`);
        // step 2
        console.warn("Give me a sec, I'm coming down and add 6 to x");
        data = await delay();
        console.log(`%c ${data}`, 'color: blue');
        x += 6;
        console.log(`x + 6 = ${x}`);
        // step 3
        x -= 1;
        console.log(`x - 1 = ${x}`);
        // step 4 (output x to DOM)
        document.querySelector('pre').innerText = `x = ${x}`;
    } catch (error) {
        console.error(error);
    }
}
calculator();

Karaoke

• Open es6/asyncAwait/karaoke.html and es6/asyncAwait/karaoke.js
• Compare the refactored code with the code from es6/promises/karaoke.js

const lyrics = document.getElementById('lyrics');
const heroes = {
    line1: '<p><span>1</span> I, I will be king</p>',
    line2: '<p><span>2</span> And you, you will be queen</p>',
    line3: '<p><span>3</span> Though nothing will drive them away</p>',
    line4: '<p><span>4</span> We can beat them, just for one day</p>',
    line5: '<p><span>5</span> We can be heroes, just for one day</p>',
};

const delay = (ms = 2000) => new Promise((resolve) => setTimeout(resolve, ms));

lyrics.innerHTML += '<p>--- START --------------------------------------------</p>';
delay()
    .then(() => {
        lyrics.innerHTML += heroes.line1;
        return delay();
    })
    .then(() => {
        lyrics.innerHTML += heroes.line2;
        return delay();
    })
    .then(() => {
        lyrics.innerHTML += heroes.line3;
        return delay();
    })
    .then(() => {
        lyrics.innerHTML += heroes.line4;
        return delay();
    })
    .then(() => {
        lyrics.innerHTML += heroes.line5;
        return delay();
    })
    .then(() => {
        lyrics.innerHTML += '<p>--- END ----------------------------------------------</p>';
        return delay();
    })
    .then(() => console.log('lyrics written to page'));

const karaoke = document.getElementById('lyrics');
const heroes = {
    line1: '<p><span>1</span> I, I will be king</p>',
    line2: '<p><span>2</span> And you, you will be queen</p>',
    line3: '<p><span>3</span> Though nothing will drive them away</p>',
    line4: '<p><span>4</span> We can beat them, just for one day</p>',
    line5: '<p><span>5</span> We can be heroes, just for one day</p>',
};

const delay = (ms = 2000) => new Promise((resolve) => setTimeout(resolve, ms));

async function addLine() {
    karaoke.innerHTML += '<p>--- START --------------------------------------------</p>';
    await delay();
    karaoke.innerHTML += heroes.line1;
    await delay();
    karaoke.innerHTML += heroes.line2;
    await delay();
    karaoke.innerHTML += heroes.line3;
    await delay();
    karaoke.innerHTML += heroes.line4;
    await delay();
    karaoke.innerHTML += heroes.line5;
    await delay();
    karaoke.innerHTML += '<p>--- END ----------------------------------------------</p>';
    console.log('lyrics written to page');
}
addLine();

Random words

• Open es6/asyncAwait/random_words.html and es6/asyncAwait/random_words.js
• Compare the refactored code with the code from es6/promises/random_words.js

const number = document.getElementById('number');
const dl = document.querySelector('dl');
const wordUrl = 'https://random-words-api.vercel.app/word';

number.addEventListener('change', () => {
    console.clear();
    dl.innerHTML = '';
    const words = [];
    for (let i = 1; i <= number.value; i++) {
        // push the JSON response from the fetch API to the words[] array
        // remember that the JSON response is also a promise!
        words.push(fetch(wordUrl).then((response) => response.json()));
    }

    Promise.all(words)
        .then((responses) => {
            // loop over all JSON responses once they have all been resolved
            responses.forEach((response, index) => {
                console.log(`response ${index}`, response);
                dl.innerHTML += `<dt>${response[0].word}</dt><dd>${response[0].definition}</dd>`;
            });
        })
        .catch((error) => console.error(error));
});

number.dispatchEvent(new Event('change'));

const number = document.getElementById('number');
const dl = document.querySelector('dl');
const wordUrl = 'https://random-words-api.vercel.app/word';

async function fetchWord() {
    const response = await fetch(wordUrl);
    return response.json();
}

async function updatePage(words) {
    const responses = await Promise.all(words);
    responses.forEach((response, index) => {
        console.log(`response ${index}`, response);
        dl.innerHTML += `<dt>${response[0].word}</dt><dd>${response[0].definition}</dd>`;
    });
}

number.addEventListener('change', () => {
    console.clear();
    dl.innerHTML = '';
    const words = [];
    for (let i = 1; i <= number.value; i++) {
        words.push(fetchWord());
    }
    updatePage(words);
});

number.dispatchEvent(new Event('change'));

Fetch images

• Open es6/asyncAwait/images.html and es6/asyncAwait/images.js
• Compare the refactored code with the code from es6/fetch/images.js

const url = 'https://my-json-server.typicode.com/pverhaert/itf-api/picsum';
const spinner = document.querySelector('.spinner');

function fetchImages() {
    fetch(url)
        .then((response) => {
            // check for errors
            if (!response.ok) {
                throw new Error(`An error has occurred: ${response.status}  ${response.statusText}`); // check for errors
            }
            // return JSON data
            return response.json();
        })
        .then((images) => {
            // add a card for every image in the array images[]
            images.forEach((image) => {
                document.getElementById('imgContainer').innerHTML += `
                    <div class="card">
                      <img src="${image.url}/600/400" class="section media" alt="Image by ${image.author}">
                      <div class="section">
                        Image &copy; <a href="https://unsplash.com/photos/${image.meta.unsplash}" target="_blank">${image.author}</a>
                        <br>
                        Category: ${image.category}
                      </div>
                    </div>
                `;
            });
        })
        .then(() => {
            // hide the spinner
            spinner.classList.add('hidden');
        })
        .catch((error) => {
            spinner.classList.add('hidden');
            console.log(error);
        });
}
fetchImages();

const url = 'https://my-json-server.typicode.com/pverhaert/itf-api/picsum';
const spinner = document.querySelector('.spinner');

function updatePage(images) {
    images.forEach((image) => {
        document.getElementById('imgContainer').innerHTML += `
                <div class="card">
                  <img src="${image.url}/600/400" class="section media" alt="Image by ${image.author}">
                  <div class="section">
                    Image &copy; <a href="https://unsplash.com/photos/${image.meta.unsplash}" target="_blank">${image.author}</a>
                    <br>
                    Category: ${image.category}
                  </div>
                </div>
            `;
    });
}

async function fetchImages() {
    try {
        const response = await fetch(url);
        if (!response.ok) {
            throw new Error(`An error has occurred: ${response.status}  ${response.statusText}`); // check for errors
        }
        const images = await response.json();
        updatePage(images);
    } catch (error) {
        console.error(error);
    }
    spinner.classList.add('hidden');
}
fetchImages();

Fetch movie info

• Open es6/asyncAwait/omdb.html and es6/asyncAwait/omdb.js
• Compare the refactored code with the code from es6/fetch/omdb.js

const omdbapi = 'https://www.omdbapi.com/';
const spinner = document.querySelector('.spinner');
const form = document.querySelector('form');

function fetchMovie(url) {
    console.log(url);
    fetch(url)
    .then((response) => {
        if (!response.ok) {
            throw new Error(`An error has occurred: ${response.status}  ${response.statusText}`); // check for errors
        }
        return response.json();
    })
    .then((movie) => {
        // info if movie not found
        let info = `
                  <div class="card warning full-width">
                    <p>No info found for <b>${title.value}</b></p>
                  </div>`;
        // overwrite info if the movie is found
        if (movie.Response === 'True') {
            const poster = movie.Poster && movie.Poster.length > 10 ? `<img src="${movie.Poster}">` : '';
            info = `
                    <div class="row">
                      <div class="col-sm-6">${poster}</div>
                      <div class="col-sm-6">
                        <h2>${movie.Title}</h2>
                        <p><b>Genre: </b>${movie.Genre}<br>
                        <b>Released: </b>${movie.Released}<br>
                        <b>Actors: </b>${movie.Actors}<br>
                        <b>Director: </b>${movie.Director}<br></p>
                        <hr>
                        <p class="text-justify">${movie.Plot}</p>
                      </div>
                    </div>`;
        }
        document.getElementById('movieContainer').innerHTML = info;
    })
    .then(() => {
        spinner.classList.add('hidden');
    })
    .catch((error) => {
        spinner.classList.add('hidden');
        console.log(error);
    });
}

form.addEventListener('submit', (e) => {
    e.preventDefault();
    // get all field data from the form
    const data = new FormData(form);
    // convert data to a query string
    const queryString = new URLSearchParams(data).toString();
    // console.log(queryString);
    // fetch data from OMDb
    fetchMovie(`${omdbapi}?${queryString}`);
});
form.dispatchEvent(new Event('submit'));

const omdbapi = 'https://www.omdbapi.com/';
const spinner = document.querySelector('.spinner');
const form = document.querySelector('form');

function updatePage(movie) {
    // info if movie not found
    let info = `
          <div class="card warning full-width">
            <p>No info found for <b>${title.value}</b></p>
          </div>`;
    // overwrite info if the movie is found
    if (movie.Response === 'True') {
        const poster = movie.Poster && movie.Poster.length > 10 ? `<img src="${movie.Poster}">` : '';
        info = `
            <div class="row">
              <div class="col-sm-6">${poster}</div>
              <div class="col-sm-6">
                <h2>${movie.Title}</h2>
                <p><b>Genre: </b>${movie.Genre}<br>
                <b>Released: </b>${movie.Released}<br>
                <b>Actors: </b>${movie.Actors}<br>
                <b>Director: </b>${movie.Director}<br></p>
                <hr>
                <p class="text-justify">${movie.Plot}</p>
              </div>
            </div>`;
    }
    document.getElementById('movieContainer').innerHTML = info;
}

async function fetchMovie(url) {
    try {
        const response = await fetch(url);
        if (!response.ok) {
            throw new Error(`An error has occurred: ${response.status}  ${response.statusText}`); // check for errors
        }
        const movie = await response.json();
        updatePage(movie);
    } catch (error) {
        console.error(error);
    }
    spinner.classList.add('hidden');
}

form.addEventListener('submit', (e) => {
    e.preventDefault();
    const data = new FormData(form);
    const queryString = new URLSearchParams(data).toString();
    spinner.classList.remove('hidden');
    fetchMovie(`${omdbapi}?${queryString}`);
});
form.dispatchEvent(new Event('submit'));

Belgian railway schedules (advanced)

• Open es6/asyncAwait/irail.html and es6/asyncAwait/irail.js
• Compare the refactored code with the code from es6/fetch/irail.js

const buttons = document.getElementById('buttons');
const preloader = document.getElementById('preloader');
const stationsUrl = 'https://api.irail.be/stations/?format=json&lang=en';
let closestStations = [];
// default value for myLocation = Geel
const myLocation = {
    lat: 51.162074,
    lng: 4.99088,
};

// get current position
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
        (position) => {
            // update myLocation
            myLocation.lat = position.coords.latitude;
            myLocation.lng = position.coords.longitude;
            // fetch all Belgian railway stations
            fetchStations();
        },
        (error) => {
            alert('Unable to retrieve your location');
        },
        {
            enableHighAccuracy: true,
            timeout: 3000,
        }
    );
} else {
    alert('Geolocation is not supported by this browser');
}

function fetchStations() {
    // fetch all Belgian railway stations
    preloader.style.visibility = 'visible';
    preloader.querySelector('p').textContent = 'Loading stations ...';
    fetch(stationsUrl)
        .then((response) =>
            // return JSON part of the response
            response.json()
        )
        .then((stations) => {
            console.log('unordered list of railway stations', stations);
            preloader.querySelector('p').textContent = 'Find closest station ...';
            // modify the properties of every station
            return stations.station.map((st) => {
                // convert lat and lng form string to number
                const lat = +st.locationY;
                const lng = +st.locationX;
                // calculate the distance between your location and the station location as the crow flies (in km)
                const distance = calcCrow(lat, lng, myLocation.lat, myLocation.lng);
                return {
                    lat,
                    lng,
                    distance,
                    id: st.id,
                    name: st.name,
                };
            });
        })
        .then((stations) => {
            // order railway stations by distance from your location
            const ordered = stations.sort((a, b) => a.distance - b.distance);
            console.log('ordered list of railway stations', ordered);
            return ordered;
        })
        .then((orderedStations) => {
            // get the five closest railway stations
            closestStations = orderedStations.slice(0, 5);
            console.table(closestStations);
            // add a button for every station
            closestStations.forEach((station) => {
                buttons.innerHTML += `<button data-id="${station.id}">${station.name}</button>`;
            });
            // add event listener to every button
            buttons.querySelectorAll('button').forEach((button) => {
                button.addEventListener('click', function (e) {
                    const id = this.dataset.id;
                    document.getElementById('station').textContent = this.textContent;
                    // get timetable from the clicked station
                    fetchTimetable(id, this.textContent);
                });
            });
            // trigger click event on first button
            buttons.querySelector('button:first-child').dispatchEvent(new Event('click'));
            preloader.style.visibility = 'hidden';
        })
        .catch((error) => {
            console.log(error);
        });
}

function fetchTimetable(id, station) {
    preloader.style.visibility = 'visible';
    preloader.querySelector('p').textContent = `Loading timetable for ${station}...`;
    const liveboardUrl = `https://api.irail.be/liveboard/?id=${id}&format=json&lang=en`;
    fetch(liveboardUrl)
        .then((response) => response.json())
        .then((data) => {
            // we only need the departure[] containing the timetable
            const table = data.departures.departure;
            console.log('timetable', table);
            // return the transformed timetable
            return table.map((tbl) => {
                // the API sends the time in sec, we need ms
                const departure = new Date(+tbl.time * 1000).toTimeString().substring(0, 5);
                let delay = '';
                let color = 'border-green';
                // if delay is not '0', draw a red borde
                if (tbl.delay !== '0') {
                    // convert the delay from sec to min
                    delay = `+${tbl.delay / 60}`;
                    color = 'border-red';
                }
                return {
                    to: tbl.station,
                    platform: tbl.platform,
                    delay,
                    color,
                    departure,
                };
            });
        })
        .then((table) => {
            // build the timetable
            let rows = '';
            table.forEach((train) => {
                rows += `
                    <div class="${train.color}">
                      <span>${train.departure}</span>
                      <span>${train.delay}</span>
                      <span>${train.platform}</span>
                      <span>${train.to}</span>
                   </div> 
                `;
            });
            document.getElementById('timetable').innerHTML = rows;
            preloader.style.visibility = 'hidden';
        })
        .catch((error) => alert(error));
}

//This function takes in latitude and longitude of two location and returns the distance between them as the crow flies (in km)
function calcCrow(lat1, lon1, lat2, lon2) {
    const R = 6371; // km
    const dLat = ((lat2 - lat1) * Math.PI) / 180;
    const dLon = ((lon2 - lon1) * Math.PI) / 180;
    const latitude1 = (lat1 * Math.PI) / 180;
    const latitude2 = (lat2 * Math.PI) / 180;

    const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.sin(dLon / 2) * Math.sin(dLon / 2) * Math.cos(latitude1) * Math.cos(latitude2);
    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
    return Math.round(R * c * 100) / 100;
}

const buttons = document.getElementById('buttons');
const preloader = document.getElementById('preloader');
const stationsUrl = 'https://api.irail.be/stations/?format=json&lang=en';
// default value for myLocation = Geel
const myLocation = {
    lat: 51.162074,
    lng: 4.99088,
};

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
        (position) => {
            myLocation.lat = position.coords.latitude;
            myLocation.lng = position.coords.longitude;
            fetchStations().catch((error) => {
                hidePreloader();
                console.log(error);
            });
        },
        (error) => {
            alert('Unable to retrieve your location');
        },
        {
            enableHighAccuracy: true,
            timeout: 3000,
        }
    );
} else {
    alert('Geolocation is not supported by this browser');
}

function hidePreloader(state = true, message = '') {
    state ? (preloader.style.visibility = 'hidden') : (preloader.style.visibility = 'visible');
    preloader.querySelector('p').textContent = message;
}

async function fetchStations() {
    hidePreloader(false, 'Loading stations ...');
    const response = await fetch(stationsUrl);
    if (!response.ok) {
        throw new Error(`An error has occurred: ${response.status}  ${response.statusText}`); // check for errors
    }
    let stations = await response.json();
    stations = stationDistance(stations);
    stations = stations.sort((a, b) => a.distance - b.distance).slice(0, 5);
    console.table(stations);
    stationButtons(stations);
    buttons.querySelector('button:first-child').dispatchEvent(new Event('click'));
    hidePreloader();
}

async function fetchTimetable(id, station) {
    hidePreloader(false, `Loading timetable for ${station}...`);
    const liveboardUrl = `https://api.irail.be/liveboard/?id=${id}&format=json&lang=en`;
    const response = await fetch(liveboardUrl);
    const data = await response.json();
    let table = data.departures.departure;
    table = transformTimetable(table);
    showTimetable(table);
    hidePreloader();
}

function stationDistance(stations) {
    return stations.station.map((st) => {
        const lat = +st.locationY;
        const lng = +st.locationX;
        const distance = calcCrow(lat, lng, myLocation.lat, myLocation.lng);
        return {
            lat,
            lng,
            distance,
            id: st.id,
            name: st.name,
        };
    });
}

function stationButtons(stations) {
    stations.forEach((station) => {
        buttons.innerHTML += `<button data-id="${station.id}">${station.name}</button>`;
    });
    buttons.querySelectorAll('button').forEach((button) => {
        button.addEventListener('click', function (e) {
            const id = this.dataset.id;
            document.getElementById('station').textContent = this.textContent;
            fetchTimetable(id, this.textContent);
        });
    });
}

function transformTimetable(table) {
    return table.map((tbl) => {
        const departure = new Date(+tbl.time * 1000).toTimeString().substring(0, 5);
        let delay = '';
        let color = 'border-green';
        if (tbl.delay !== '0') {
            delay = `+${tbl.delay / 60}`;
            color = 'border-red';
        }
        return {
            to: tbl.station,
            platform: tbl.platform,
            delay,
            color,
            departure,
        };
    });
}

function showTimetable(table) {
    let rows = '';
    table.forEach((train) => {
        rows += `
            <div class="${train.color}">
              <span>${train.departure}</span>
              <span>${train.delay}</span>
              <span>${train.platform}</span>
              <span>${train.to}</span>
           </div> 
        `;
    });
    document.getElementById('timetable').innerHTML = rows;
}

//This function takes in latitude and longitude of two location and returns the distance between them as the crow flies (in km)
function calcCrow(lat1, lon1, lat2, lon2) {
    const R = 6371; // km
    const dLat = ((lat2 - lat1) * Math.PI) / 180;
    const dLon = ((lon2 - lon1) * Math.PI) / 180;
    const latitude1 = (lat1 * Math.PI) / 180;
    const latitude2 = (lat2 * Math.PI) / 180;

    const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.sin(dLon / 2) * Math.sin(dLon / 2) * Math.cos(latitude1) * Math.cos(latitude2);
    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
    return Math.round(R * c * 100) / 100;
}

READING TIPS

• Async function@Mozilla (opens new window)
• Await operator@Mozilla (opens new window)
• Async/Await@W3Schools (opens new window)
• The odin project Async/Await (opens new window)
• How to Use Fetch with Async/Await (opens new window)
• A Guide to JavaScript Promises (opens new window)

WATCHING TIPS

• dotJS 2017 - Wes Bos - Async + Await (opens new window)
• JavaScript Async/Await in 7 minutes (opens new window)
• Async Functions & Await Explained in JavaScript) (opens new window)

Weather app

• The odin project weather apps (opens new window)
• Accuweather (opens new window)

const key = 'MBEqSqMMid8s9gsk2cO6lAaYABDX05aM';

const getCity = async (city) => {
  const base = 'http://dataservice.accuweather.com/locations/v1/cities/search';
  const query = `?apikey=${key}&q=${city}`;

  const response = await fetch (base + query);
  const data = await response.json();

  return data[0];
}

getCity('Stockholm')
  .then(data => console.log(data))
  .catch(err => console.log(err));

  const getWeather = async (id) => {
    const base = 'http://dataservice.accuweather.com/currentconditions/v1/';
    const query = `${id}?apikey=${key}`;
    
    const response = await fetch(base + query);
    const data = await response.json();

    return data[0];
  };