JavaScript Fetch API

Definition and usage

fetch() The method starts the process of retrieving resources from the server.

fetch() The method returns a Promise parsed as a Response object.

Tip:No longer need XMLHttpRequest.

Instance

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

Try it yourself

Fetch is based on async and await. This example may be easier to understand:

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

Try it yourself

Use easily understandable names instead of x and y:

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

Try it yourself

Syntax

fetch(file)

Parameter

Parameter Description
file Optional. The name of the resource to be retrieved.

Return value

Type Description
Promise Parsed as a Response object Promise.

Browser Support

fetch() It is an ECMAScript6 (ES6) feature.

All modern browsers support ES6 (JavaScript 2015).

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Yes Yes Yes Yes Yes

Internet Explorer 11 (and earlier versions) is not supported fetch().