Fetch API

Fetch API — Provides an interface for fetching resources (including across the network). It will seem familiar to anyone who has used XMLHttpRequest, but the new API provides a more powerful and flexible feature set. 

Fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(JSON.stringify(myJson));
  });
Function getMoviesFromApiAsync() {
  return fetch('https://facebook.github.io/react-native/movies.json')
    .then((response) => response.json())
    .then((responseJson) => {
      return responseJson.movies;
    })
    .catch((error) => {
      console.error(error);
    });
}
Async function getMoviesFromApi() {
  try {
    let response = await fetch(
      'https://facebook.github.io/react-native/movies.json'
    );
    let responseJson = await response.json();
    return responseJson.movies;
  } catch (error) {
    console.error(error);
  }
}
  • Provides a generic definition of Request and Response objects (and other things involved with network requests).
  • This kind of functionality was previously achieved using XMLHttpRequest.
  • Provides a better alternative that can be easily used by other technologies such as Service Workers.

Related concepts

→
Fetch API

Fetch API — Structure map

Clickable & Draggable!

Fetch API — Related pages: