GlobalFetch

The GlobalFetch mixin of the Fetch API contains the GlobalFetch.fetch() method used to start the process of fetching a resource.

GlobalFetch is implemented by both Window and WorkerGlobalScope, which means that it's available in pretty much any context in which you might wish to fetch resources.

A fetch() promise will reject with a TypeError when a network error is encountered, although this usually means permissions issue or similar. An accurate check for a successful fetch() would include checking that the promise resolved, then checking that the Response.ok property has a value of true. An HTTP status of 404 does not constitute a network error.

GlobalFetch is controlled by the connect-src directive of Content Security Policy rather than the directive of the resources it's retrieving.

Properties

None.

Methods

GlobalFetch.fetch()

Starts the process of fetching a resource.

Examples

In our basic fetch example (run example live) we use a simple fetch call to grab an image and display it in an <img> tag. You'll notice that since we are requsting an image, we need to run Body.blob() (Response implements body) to give the response its correct MIME type.

var myImage = document.querySelector('.my-image');
fetch('flowers.jpg').then(function(response) {
  return response.blob();
}).then(function(response) {
  var objectURL = URL.createObjectURL(response);
  myImage.src = objectURL;
});

Specifications

Browser compatibility

[1] This API is implemented behind a preference.

See also

• Fetch API
• ServiceWorker API
• HTTP access control (CORS)
• HTTP