bugl
bugl
HomeLearnPatternsPathsSearchPremium
HomeLearnPatternsPaths

Loading lesson path

Learn/JavaScript/Objects, Classes, and Advanced Patterns
JavaScript•Objects, Classes, and Advanced Patterns

JavaScript Fetch API

The Fetch API interface allows web browser to make HTTP requests to web servers.

😀 No need for XMLHttpRequest anymore.

Browser Support

fetch() is an ES6 feature .

ES6 is fully supported in all modern browsers since June 2017:

Chrome 51Edge 15Firefox 54Safari 10Opera 38
May 2016Apr 2017Jun 2017Sep 2016Jun 2016

A Fetch API Example

The example below fetches a file and displays the content:

fetch(file) .then(x => x.text()) .then(y => myDisplay(y));

Since Fetch is based on async and await, the example above might be easier to understand like this:

Example

async function getText(file) {
  let x = await fetch(file);
  let y = await x.text();
  myDisplay(y);
}

Or even better: Use understandable names instead of x and y:

Example

async function getText(file) {
  let myObject = await fetch(file);
  let myText = await myObject.text();
  myDisplay(myText);
}

Previous

Web APIs - Introduction

Next

Web Geolocation API