1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
|
---
title: WindowOrWorkerGlobalScope.fetch()
slug: Web/API/WindowOrWorkerGlobalScope/fetch
tags:
- API
- Experimental
- Fetch
- Fetch API
- GlobalFetch
- Petición
- Referencia
- metodo
- solicitud
translation_of: Web/API/WindowOrWorkerGlobalScope/fetch
---
<div>{{APIRef("Fetch API")}}</div>
<p>El método <code><strong>fetch()</strong></code> del mixin {{domxref("WindowOrWorkerGlobalScope")}} lanza el proceso de solicitud de un recurso de la red. Esto devuelve una promesa que resuelve al objeto {{domxref("Response")}} que representa la respuesta a la solicitud realizada.</p>
<p>Tanto {{domxref("Window")}} como {{domxref("WorkerGlobalScope")}} implementan <code>WorkerOrGlobalScope</code>, por lo que el método <code>fetch()</code> está disponible en prácticamente cualquier contexto desde el que se pueda necesitar solicitar un recurso.</p>
<p>Una promesa {{domxref("WindowOrWorkerGlobalScope.fetch","fetch()")}} se rechaza con un {{jsxref("TypeError")}} cuando sucede un error en la red, aunque normalmente significa un tema de permisos o similar. Una comprobación más precisa de una solicitud con <code>fetch()</code> debería comprobar que la promesa se resuelve, y que la propiedad {{domxref("Response.ok")}} tiene valor <code>true</code>. Un estatus HTTP 404 no constituye un error de red.</p>
<p>El método <code>fetch()</code> es controlado por la directiva <code>connect-src</code> de la <a href="/en-US/docs/Security/CSP/CSP_policy_directives">Política de Seguridad de Contenido (Content Security Policy)</a> en lugar de la directiva del recurso que se solicita.</p>
<div class="note">
<p><strong>Nota</strong>: Los parámetros del método <code>fetch()</code> son indénticos a los del constructor de {{domxref("Request.Request","Request()")}}.</p>
</div>
<h2 id="Sintaxis">Sintaxis</h2>
<pre class="syntaxbox">Promise<Response> fetch(input[, init]);</pre>
<h3 id="Parámetros">Parámetros</h3>
<dl>
<dt><em>input</em></dt>
<dd>Define el recurso que se quiere solicitar. Puede ser:
<ul>
<li>Un {{domxref("USVString")}} con la URL del recurso a solicitar. Algunos navegadores aceptan los esquemas <code>blob:</code> y <code>data:</code>.</li>
<li>Un objeto {{domxref("Request")}}.</li>
</ul>
</dd>
<dt><em>init</em> {{optional_inline}}</dt>
<dd>Objeto de opciones que contiene configuraciones para personalizar la solicitud. Estas opciones pueden ser:
<ul>
<li><code>method</code>: El método de solicitud, p.ej., <code>GET</code>, <code>POST</code>.</li>
<li><code>headers</code>: Cualquier cabecera que se quiera añadir a la solicitud, contenidas en un objeto {{domxref("Headers")}} o un objeto literal con valores {{domxref("ByteString")}}.</li>
<li><code>body</code>: Cualquier cuerpo que se quiera añadir a la solicitud: puede ser un {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, u objeto {{domxref("USVString")}}. Nótese que las solicitudes con métodos <code>GET</code> o <code>HEAD</code> no pueden tener cuerpo.</li>
<li><code>mode</code>: El modo a usar en la solicitud, p.ej., <code>cors</code>, <code>no-cors</code>, o <code>same-origin</code>.</li>
<li><code>credentials</code>: Las credenciales que se quieran utilizar para la solicitud: <code>omit</code>, <code>same-origin</code>, o <code>include</code>. Para enviar automáticamente las cookies del dominio actual, debe indicarse esta opción. Desde Chrome 50, esta propiedad también acepta una instancia de {{domxref("FederatedCredential")}} o de {{domxref("PasswordCredential")}}.</li>
<li><code>cache</code>: El modo de caché a utilizar en la solicitud: <code>default</code>, <code>no-store</code>, <code>reload</code>, <code>no-cache</code>, <code>force-cache</code>, o <code>only-if-cached</code>.</li>
<li><code>redirect</code>: El modo de redirección a usar: <code>follow</code> (seguir redirecciones automáticamente), <code>error</code> (abortar si sucede un error durante la redirección), o <code>manual</code> (gestionar redirecciones manualmente). El valor por defecto en Chrome es <code>follow</code> (hasta la versión 46 era <code>manual</code>).</li>
<li><code>referrer</code>: Un {{domxref("USVString")}} que especifique <code>no-referrer</code>, <code>client</code>, o una URL. El valor por defecto es <code>client</code>.</li>
<li><code>referrerPolicy</code>: Especifica el valor de la cabecera HTTP referer. Puede ser <code>no-referrer</code>, <code>no-referrer-when-downgrade</code>, <code>origin</code>, <code>origin-when-cross-origin</code>, <code>unsafe-url</code>.</li>
<li><code>integrity</code>: Contiene el valor de <a href="/en-US/docs/Web/Security/Subresource_Integrity">integridad de subrecurso (subresource integrity)</a> de la solicitud (p.ej., <code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=</code>).</li>
<li><code>keepalive</code>: La opción <code>keepalive</code> se puede usar para permitir que recurso dure más que la página. Las solicitudes con el indicador <code>keepalive</code> son un reemplazo de la API {{domxref("Navigator.sendBeacon()")}}. </li>
<li><code>signal</code>: Una instancia de objeto {{domxref("AbortSignal")}}; permite comunicarse con con una solicitud vigente y abortarla si se desea via {{domxref("AbortController")}}.</li>
</ul>
</dd>
</dl>
<h3 id="Return_value">Return value</h3>
<p>Una {{domxref("Promise")}} que resuelve a un objeto {{domxref("Response")}}.</p>
<h3 id="Excepciones">Excepciones</h3>
<table class="standard-table">
<thead>
<tr>
<th scope="col"><strong>Tipo</strong></th>
<th scope="col"><strong>Descriptción</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td><code>AbortError</code></td>
<td>Se abortó la solicitud (mediante {{domxref("AbortController.abort()")}}).</td>
</tr>
<tr>
<td><code>TypeError</code></td>
<td>Desde <a href="/en-US/docs/Mozilla/Firefox/Releases/43">Firefox 43</a>, <code>fetch()</code> lanza un <code>TypeError</code> si la URL tiene credenciales, como en <code>http://usuario:clave@ejemplo.com</code>.</td>
</tr>
</tbody>
</table>
<h2 id="Ejemplo">Ejemplo</h2>
<p>En el ejemplo de <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-request">solicitud con Request</a> (ver <a href="https://mdn.github.io/fetch-examples/fetch-request/">Fetch Request live</a>) creamos un nuevo objeto {{domxref("Request")}} usando el constructor pertinente, y realizamos una solicitud usando <code>fetch()</code>. Dado que estamos solicitando una imagen, ejecutamos {{domxref("Body.blob()")}} en la respuesta para darle el tipo MIME correspondiente para que sea gestionada apropiadamente, luego creamos un objeto URL de ella para mostrarla en un elemento {{htmlelement("img")}}.</p>
<pre class="brush: js">var miImagen = document.querySelector('img');
var miSolicitud = new Request('flores.jpg');
fetch(miSolicitud).then(function(respuesta) {
return respuesta.blob();
}).then(function(respuesta) {
var objeto = URL.createObjectURL(respuesta);
miImagen.src = objeto;
});</pre>
<p>En el ejemplo de <a href="https://github.com/mdn/fetch-examples/blob/master/fetch-with-init-then-request/index.html">solicitud con inicializador y Request</a> (ver <a href="https://mdn.github.io/fetch-examples/fetch-with-init-then-request/">Fetch Request init live</a>) hacemos lo mismo pero además pasamos un objeto inicializador cuando invocamos el <code>fetch()</code>:</p>
<pre class="brush: js">var miImagen = document.querySelector('img');
var misCabeceras = new Headers();
misCabeceras.append('Content-Type', 'image/jpeg');
var miInicializador = { method: 'GET',
headers: misCabeceras,
mode: 'cors',
cache: 'default' };
var miSolicitud = new Request('flores.jpg');
fetch(miSolicitud,miInicializador).then(function(respuesta) {
...
});</pre>
<p>Nótese que también podríamos pasar el objeto inicializador con el constructor de <code>Request</code> para conseguir el mismo efecto, p.ej.:</p>
<pre class="brush: js">var miSolicitud = new Request('flores.jpg', miInicializador);</pre>
<p>También se puede usar un objeto literal a modo de <code>headers</code> en <code>init</code>.</p>
<pre class="brush: js">var miInicializador = { method: 'GET',
headers: {
'Content-Type': 'image/jpeg'
},
mode: 'cors',
cache: 'default' };
var myRequest = new Request('flowers.jpg', miInicializador);
</pre>
<h2 id="Especificaciones">Especificaciones</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Especificación</th>
<th scope="col">Estado</th>
<th scope="col">Comentarios</th>
</tr>
<tr>
<td>{{SpecName('Fetch','#fetch-method','fetch()')}}</td>
<td>{{Spec2('Fetch')}}</td>
<td>Definida parcialmente en <code>WindowOrWorkerGlobalScope</code> en la especificación más reciente.</td>
</tr>
<tr>
<td>{{SpecName('Fetch','#dom-global-fetch','fetch()')}}</td>
<td>{{Spec2('Fetch')}}</td>
<td>Definición inicial</td>
</tr>
<tr>
<td>{{SpecName('Credential Management')}}</td>
<td>{{Spec2('Credential Management')}}</td>
<td>Añade una instancia de {{domxref("FederatedCredential")}} o {{domxref("PasswordCredential")}} como valor posible para <code>init.credentials</code>.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
<p>{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}</p>
<h2 id="Ver_también">Ver también</h2>
<ul>
<li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li>
<li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
<li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">Control de acceso HTTP (CORS)</a></li>
<li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
</ul>
|
