Fetch basic concepts

This page is not complete.

Fetch is a modern concept equivalent to XMLHttpRequest. It offers a lot of the same functionality as the  XMLHttpRequest, but is designed to be more extensible and efficient. This article explains some of the basic concepts of the Fetch API.

This article will be added to over time. If you find a Fetch concept that you feel needs explaining better, let someone know on the dev-mdc mailing list, or Mozilla IRC (#mdn room.)

In a nutshell

At the heart of Fetch are the Interface abstractions of HTTP Requests, Responses, Headers, and Body payloads, along with a global fetch method for initiating asynchronous resource requests. Because the main components of HTTP are abstracted as JavaScript objects, it is easy for other APIs to make use of such functionality.

Service Workers is an example of an API that makes heavy use of Fetch.

Fetch takes the asynchronous nature of such requests to one step further. The API is completely Promise-based.


Guard is a feature of Headers objects, with possible values of immutable, request, request-no-cors, response, or none, depending on where the header is used.

When a new Headers object is created using the Headers() constructor, its guard is set to none (the default). When a Request or Response object is created, it has an associated Headers object whose guard is set as summarized below:

new object's type creating constructor guard setting of associated Headers object
Request Request() request
Request() with mode of no-cors request-no-cors
Response Response() response
error() or redirect() methods immutable

A header's guard affects  the set(), delete(), and append() methods which change the header's contents. A TypeError is thrown if you try to modify a Headers object whose guard is immutable. However, the operation will work if


© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.

API concepts Fetch Fetch API guard request XMLHttpRequest