The Fetch API provides an interface for fetching resources (including across the network). It will seem familiar to anyone who has used XMLHttpRequest, but it provides a more powerful and flexible feature set. This article explains some of the basic concepts of the Fetch API.

At the heart of Fetch are the Interface abstractions of HTTP Requests, Responses, and Headers, along with a 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 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:

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

• guard is request and the header name isn't a forbidden header name .
• guard is request-no-cors and the header name/value is a simple header .
• guard is response and the header name isn't a forbidden response header name .