fetch

Learn HTTP requests with the fetch API.

What is the fetch API?

fetch is the standard way to make HTTP requests in the browser and React Native. It takes a URL and returns a Promise. The Promise represents the result of the request; when it resolves it gives the response.

Basic usage: fetch("https://api.example.com/users"). This call makes a GET request and returns a Promise. You wait for the Promise with .then() or with await. fetch is part of modern JavaScript; it needs no extra library. React Native also has alternatives like axios but fetch is enough for most cases. The Promise returned by fetch resolves when the response arrives; but it rejects on a network error.

Promise and then

fetch returns a Promise. You catch the Promise with .then(). The .then(response => ...) function runs when the response arrives. The response is a Response object; it does not hold the data directly, you call methods such as response.json() to extract it.

Example: fetch("https://api.example.com/users").then(response => response.json()).then(data => console.log(data));. The first then takes the response and turns it into JSON; the second then takes this JSON data. This chain structure lets you process asynchronous operations in order. Each then passes a value to the next one. The Promise chain is the basic way to write readable async code; but async/await makes it even cleaner.

Exercise Make a request with fetch

Write a UserLoader component. Assign fetch("https://api.example.com/users") to a const promise. Add a promise.then(response => console.log(response)) call. The component returns null.

Show example solution

function UserLoader() {
  const promise = fetch("https://api.example.com/users");
  promise.then(response => console.log(response));
  return null;
}

Test yourself

What type does fetch return?
```
fetch("https://api.example.com/users");
```
- Number
- Array
- String
- Promise
Show answer

Promise — answer: Promise. fetch's result is awaited with then or await.

Write the fetch call

const url = "api.example.com/users";
const promise = ____(url);

Show answer

const url = "api.example.com/users";
const promise = fetch(url);

Match the concept to its role

fetch

Makes an HTTP request
Promise

Represents the result
then

Catches the response
URL

Request address

Next lesson: GET request

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies