Fetch : concepts de départ
L'API Fetch fournit une interface pour récupérer des ressources (y compris depuis le réseau). Elle paraîtra familière à quiconque aura déjà utilisé XMLHttpRequest
, mais elle fournit un jeu de fonctionnalités plus puissantes et plus souples. Cet article explique quelques-uns des principes de base de l'API Fetch.
Note : 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 MDN discussion forum, or Mozilla IRC (#mdn room.)
In a nutshell
At the heart of Fetch are the Interface abstractions of HTTP Request
s, Response
s, 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 (en-US) 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
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()
(en-US) 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() (en-US) |
response |
error() (en-US) or
redirect() (en-US) methods
|
immutable |
A header's guard affects the set()
(en-US), delete()
(en-US), and append()
(en-US) 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 .