Fetching data with fetch

Fetch weather data from an API using fetch and async/await.

async function and fetch

When fetching data from a server, fetch returns a Promise. With the await keyword we wait for that promise's result. await can only be used inside a function marked async. We define a function like async function fetchWeather(city). Inside it we send the request with await fetch(url), read the body as text with await response.text(), and return the result. Each await waits for one step.

Two-step waiting

In a fetch request you typically use await twice. The first await waits for the request to finish and gives you a Response object. The second await waits for the body to be read. With const response = await fetch(url) you get the response; with const info = await response.text() you read the body as text. Keeping the two steps separate gives flexibility: you can check the status first, then process the body.

Exercise Define the async fetchWeather function

Continue on top of the previous lesson's solution. Define an async function fetchWeather(city). Inside it, assign the template literal `https://api.example.com/weather?city=${city}` to a url variable. Get the response with const response = await fetch(url), read the body with const info = await response.text(), and return it with return info.

Show example solution

const app = document.querySelector("#app");
const cityInput = document.querySelector("#cityInput");
const getWeatherButton = document.querySelector("#getWeatherButton");
const weatherResult = document.querySelector("#weatherResult");
console.log(app, cityInput, getWeatherButton, weatherResult);

function getWeather() {
  const city = cityInput.value;
  console.log(city);
}

getWeatherButton.addEventListener("click", getWeather);

async function fetchWeather(city) {
  const url = `https://api.example.com/weather?city=${city}`;
  const response = await fetch(url);
  const info = await response.text();
  return info;
}

Test yourself

What does await response.text() give you?
```
const info = await response.text();
```
- A Response object
- The body as text
- A status code
- A Promise object
Show answer

The body as text — Correct! await gives the body as text.

Wait for the fetch request

const response = ____;

Show answer

const response = await fetch(url);

Match the fetch steps

fetch(url)

Sends the request
await

Waits for the result
response.text()

Reads the body
return

Returns the value
Match the fetchWeather steps

async function

Defines the function
await fetch

Waits for the request
await response.text()

Waits for the body
return info

Gives the result

Next lesson: Rendering data to the DOM

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies