diff options
Diffstat (limited to 'files/es/web/api/fetch_api/utilizando_fetch/index.html')
| -rw-r--r-- | files/es/web/api/fetch_api/utilizando_fetch/index.html | 377 |
1 files changed, 377 insertions, 0 deletions
diff --git a/files/es/web/api/fetch_api/utilizando_fetch/index.html b/files/es/web/api/fetch_api/utilizando_fetch/index.html new file mode 100644 index 0000000000..0f647a7e61 --- /dev/null +++ b/files/es/web/api/fetch_api/utilizando_fetch/index.html @@ -0,0 +1,377 @@ +--- +title: Uso de Fetch +slug: Web/API/Fetch_API/Utilizando_Fetch +tags: + - API + - BODY + - Experimental + - Fetch + - Guía + - HTTP + - Petición + - Promesa + - Promise + - Respuesta +translation_of: Web/API/Fetch_API/Using_Fetch +--- +<p>{{DefaultAPISidebar("Fetch API")}}{{ SeeCompatTable }}</p> + +<div class="summary"> +<p>La <a href="/en-US/docs/Web/API/Fetch_API">API Fetch</a> proporciona una interfaz JavaScript para acceder y manipular partes del canal HTTP, tales como peticiones y respuestas. También provee un método global {{domxref("GlobalFetch.fetch","fetch()")}} que proporciona una forma fácil y lógica de obtener recursos de forma asíncrona por la red.</p> +</div> + +<p>Este tipo de funcionalidad se conseguía previamente haciendo uso de {{domxref("XMLHttpRequest")}}. Fetch proporciona una alternativa mejor que puede ser empleada fácilmente por otras tecnologías como {{domxref("ServiceWorker_API", "Service Workers")}}. Fetch también aporta un único lugar lógico en el que definir otros conceptos relacionados con HTTP como CORS y extensiones para HTTP.</p> + +<p>La especificación fetch difiere de <code>JQuery.ajax()</code> en dos formas principales:</p> + +<ul> + <li> + <p>El objeto Promise devuelto desde <code>fetch()</code> <strong>no será rechazado con un estado de error HTTP</strong> incluso si la respuesta es un error HTTP 404 o 500. En cambio, este se resolverá normalmente (con un estado <code>ok</code> configurado a false), y este solo sera rechazado ante un fallo de red o si algo impidió completar la solicitud.</p> + </li> + <li>Por defecto, <code>fetch</code> no enviará ni recibirá cookies del servidor, resultando en peticiones no autenticadas si el sitio permite mantentener una sesión de usuario (para mandar cookies, <em>credentials</em> de la opción <a href="https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters">init</a> deberan ser configuradas). Desde <a href="https://github.com/whatwg/fetch/pull/585">el 25 de agosto de 2017</a>. La especificación cambió la politica por defecto de las credenciales a <code>same-origin</code>. Firefox cambió desde la versión 61.0b13.</li> +</ul> + +<p>Una petición básica de <code>fetch</code> es realmente simple de realizar. Eche un vistazo al siguente código:</p> + +<pre class="notranslate">fetch('http://example.com/movies.json') + .then(response => response.json()) + .then(data => console.log(data));</pre> + +<p>Aquí estamos recuperando un archivo JSON a través de red e impriminedo en la consola. El uso de <code>fetch()</code> más simple toma un argumento (la ruta del recurso que quieres buscas) y devuelve un objeto Promise conteniendo la respuesta, un objeto {{domxref("Response")}}.</p> + +<p>Esto es, por supuesto, una respuesta HTTP no el archivo JSON. Para extraer el contenido en el cuerpo del JSON desde la respuesta, usamos el método {{domxref("Body.json","json()")}} (definido en el <a href="https://es.wikipedia.org/wiki/Mixin">mixin</a> de {{domxref("Body")}}, el cual está implementado por los objetos {{domxref("Request")}} y {{domxref("Response")}}).</p> + +<div class="note"> +<p><strong>Nota</strong>: El mixin de <code>Body</code> tambien tiene metodos parecidos para extraer otros tipos de contenido del cuerpo. Vease {{anch("Body")}} para más información.</p> +</div> + +<p>Las peticiones de Fetch son controladas por la directiva de <code>connect-src</code> de <a href="https://developer.mozilla.org/en-US/docs/Security/CSP/CSP_policy_directives">Content Security Policy</a> en vez de la directiva de los recursos que se han devuelto.</p> + +<h3 id="Suministrando_opciones_de_petición">Suministrando opciones de petición</h3> + +<p>El método <code>fetch()</code> puede aceptar opcionalmente un segundo parámetro, un objeto <code>init</code> que permite controlar un numero de diferentes ajustes:</p> + +<p>Vea {{domxref("GlobalFetch.fetch","fetch()")}}, para ver todas las opciones disponibles y más detalles.</p> + +<pre class="notranslate">// Ejemplo implementando el metodo POST: +async function postData(url = '', data = {}) { + // Opciones por defecto estan marcadas con un * + const response = await fetch(url, { + method: 'POST', // *GET, POST, PUT, DELETE, etc. + mode: 'cors', // no-cors, *cors, same-origin + cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached + credentials: 'same-origin', // include, *same-origin, omit + headers: { + 'Content-Type': 'application/json' + // 'Content-Type': 'application/x-www-form-urlencoded', + }, + redirect: 'follow', // manual, *follow, error + referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url + body: JSON.stringify(data) // body data type must match "Content-Type" header + }); + return response.json(); // parses JSON response into native JavaScript objects +} + +postData('https://example.com/answer', { answer: 42 }) + .then(data => { + console.log(data); // JSON data parsed by `data.json()` call + });</pre> + +<p>Tenga en cuenta que <code>mode: "no-cors"</code> solo permite un conjunto limitado de encabezados en la solicitud:</p> + +<ul> + <li><code>Accept</code></li> + <li><code>Accept-Language</code></li> + <li><code>Content-Language</code></li> + <li><code>Content-Type</code> with a value of <code>application/x-www-form-urlencoded</code>, <code>multipart/form-data</code>, or <code>text/plain</code></li> +</ul> + +<h3 id="Comprobando_que_la_petición_es_satisfactoria">Comprobando que la petición es satisfactoria</h3> + +<p>Una petición promise {{domxref("GlobalFetch.fetch","fetch()")}} será rechazada con {{jsxref("TypeError")}} cuando se encuentre un error de red, aunque esto normalmente significa problemas de permisos o similares — por ejemplo, un 404 no constituye un error de red. Una forma precisa de comprobar que la petición <code>fetch()</code> es satisfactoria pasa por comprobar si la promesa ha sido resuelta, además de comprobar que la propiedad {{domxref("Response.ok")}} tiene el valor <code>true</code> que indica que el estado de la petición HTTP es OK (código 200-299). El código sería algo así:</p> + +<pre class="brush: js notranslate">fetch('flores.jpg').then(function(response) { + if(response.ok) { + response.blob().then(function(miBlob) { + var objectURL = URL.createObjectURL(miBlob); + miImagen.src = objectURL; + }); + } else { + console.log('Respuesta de red OK pero respuesta HTTP no OK'); + } +}) +.catch(function(error) { + console.log('Hubo un problema con la petición Fetch:' + error.message); +});</pre> + +<h3 id="Proporcionando_tu_propio_objeto_Request">Proporcionando tu propio objeto Request</h3> + +<p>En lugar de pasar la ruta al recurso que deseas solicitar a la llamada del método <code>fetch()</code>, puedes crear un objeto de petición utilizando el constructor {{domxref("Request.Request","Request()")}}, y pasarlo como un argumento del método <code>fetch()</code>:</p> + +<pre class="brush: js notranslate">var myHeaders = new Headers(); + +var myInit = { method: 'GET', + headers: myHeaders, + mode: 'cors', + cache: 'default' }; + +var myRequest = new Request('flowers.jpg', myInit); + +fetch(myRequest) +.then(function(response) { + return response.blob(); +}) +.then(function(myBlob) { + var objectURL = URL.createObjectURL(myBlob); + myImage.src = objectURL; +});</pre> + +<p><code>Request()</code> acepta exactamente los mismos parámetros que el método <code>fetch()</code>. Puedes incluso pasar un objeto de petición existente para crear una copia del mismo:</p> + +<pre class="brush: js notranslate">var anotherRequest = new Request(myRequest, myInit);</pre> + +<p>Esto es muy útil ya que el cuerpo de las solicitudes y respuestas son de un sólo uso. Haciendo una copia como esta te permite utilizar la petición/respuesta de nuevo, y al mismo tiempo, si lo deseas, modificar las opciones de <code>init</code>. La copia debe estar hecha antes de la lectura del <body>, y leyendo el <body> en la copia, se marcará como leido en la petición original.</p> + +<div class="note"> +<p><strong>Nota</strong>: Existe también un método {{domxref("Request.clone","clone()")}} que crea una copia. Este tiene una semántica ligeramente distinta al otro método de copia — el primero fallará si el cuerpo de la petición anterior ya ha sido leído (lo mismo para copiar una respuesta), mientras que <code>clone()</code> no.</p> +</div> + +<h3 id="Enviar_una_petición_con_credenciales_incluido">Enviar una petición con credenciales incluido</h3> + +<p>Para producir que los navegadores envien una petición con las credenciales incluidas, incluso para una llamada de origen cruzado, añadimos<code> credentials: 'include'</code> en el el objeto <code>init</code> que se pasa al método <code>fetch()</code>.</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="function token">fetch</span><span class="punctuation token">(</span><span class="string token">'https://example.com'</span><span class="punctuation token">,</span> <span class="punctuation token">{</span> + credentials<span class="punctuation token">:</span> <span class="string token">'include'</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span></code></pre> + +<p>Si solo quieres enviar la credenciales si la URL de la petición está en el mismo origen desde donde se llamada el script, añade <code>credentials: 'same-origin'</code>.</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="comment token">// El script fué llamado desde el origen 'https://example.com'</span> + +<span class="function token">fetch</span><span class="punctuation token">(</span><span class="string token">'https://example.com'</span><span class="punctuation token">,</span> <span class="punctuation token">{</span> + credentials<span class="punctuation token">:</span> <span class="string token">'same-origin'</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span></code></pre> + +<p>Sin embargo para asegurarte que el navegador no incluye las credenciales en la petición, usa <code>credentials: 'omit'</code>.</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="function token">fetch</span><span class="punctuation token">(</span><span class="string token">'https://example.com'</span><span class="punctuation token">,</span> <span class="punctuation token">{</span> + credentials<span class="punctuation token">:</span> <span class="string token">'omit'</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span></code></pre> + +<h3 id="Enviando_datos_JSON">Enviando datos JSON</h3> + +<p>Usa {{domxref("GlobalFetch.fetch","fetch()")}} para enviar una petición POST con datos codificados en JSON .</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">var</span> url <span class="operator token">=</span> <span class="string token">'https://example.com/profile'</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> data <span class="operator token">=</span> <span class="punctuation token">{</span>username<span class="punctuation token">:</span> <span class="string token">'example'</span><span class="punctuation token">}</span><span class="punctuation token">;</span> + +<span class="function token">fetch</span><span class="punctuation token">(</span>url<span class="punctuation token">,</span> <span class="punctuation token">{</span> + method<span class="punctuation token">:</span> <span class="string token">'POST'</span><span class="punctuation token">,</span> <span class="comment token">// or 'PUT'</span> + body<span class="punctuation token">:</span> JSON<span class="punctuation token">.</span><span class="function token">stringify</span><span class="punctuation token">(</span>data<span class="punctuation token">)</span><span class="punctuation token">,</span> <span class="comment token">// data can be `string` or {object}!</span> + headers<span class="punctuation token">:</span><span class="punctuation token">{</span> + <span class="string token">'Content-Type'</span><span class="punctuation token">:</span> <span class="string token">'application/json'</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span>res <span class="operator token">=</span><span class="operator token">></span> res<span class="punctuation token">.</span><span class="function token">json</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">)</span> +<span class="punctuation token">.</span><span class="keyword token">catch</span><span class="punctuation token">(</span>error <span class="operator token">=</span><span class="operator token">></span> console<span class="punctuation token">.</span><span class="function token">error</span><span class="punctuation token">(</span><span class="string token">'Error:'</span><span class="punctuation token">,</span> error<span class="punctuation token">)</span><span class="punctuation token">)</span> +<span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span>response <span class="operator token">=</span><span class="operator token">></span> console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Success:'</span><span class="punctuation token">,</span> response<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<h3 id="Enviando_un_archivo">Enviando un archivo</h3> + +<p>Los archivos pueden ser subido mediante el HTML de un elemento input <code><input type="file" /></code>, {{domxref("FormData.FormData","FormData()")}} y {{domxref("GlobalFetch.fetch","fetch()")}}.</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">var</span> formData <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">FormData</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> fileField <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">"input[type='file']"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +formData<span class="punctuation token">.</span><span class="function token">append</span><span class="punctuation token">(</span><span class="string token">'username'</span><span class="punctuation token">,</span> <span class="string token">'abc123'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +formData<span class="punctuation token">.</span><span class="function token">append</span><span class="punctuation token">(</span><span class="string token">'avatar'</span><span class="punctuation token">,</span> fileField<span class="punctuation token">.</span>files<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="function token">fetch</span><span class="punctuation token">(</span><span class="string token">'https://example.com/profile/avatar'</span><span class="punctuation token">,</span> <span class="punctuation token">{</span> + method<span class="punctuation token">:</span> <span class="string token">'PUT'</span><span class="punctuation token">,</span> + body<span class="punctuation token">:</span> formData +<span class="punctuation token">}</span><span class="punctuation token">)</span> +<span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span>response <span class="operator token">=</span><span class="operator token">></span> response<span class="punctuation token">.</span><span class="function token">json</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">)</span> +<span class="punctuation token">.</span><span class="keyword token">catch</span><span class="punctuation token">(</span>error <span class="operator token">=</span><span class="operator token">></span> console<span class="punctuation token">.</span><span class="function token">error</span><span class="punctuation token">(</span><span class="string token">'Error:'</span><span class="punctuation token">,</span> error<span class="punctuation token">)</span><span class="punctuation token">)</span> +<span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span>response <span class="operator token">=</span><span class="operator token">></span> console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Success:'</span><span class="punctuation token">,</span> response<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<h2 id="Cabeceras">Cabeceras</h2> + +<p>La interfaz {{domxref("Headers")}} te permite crear tus propios objetos de headers mediante el constructor {{domxref("Headers.Headers","Headers()")}}. Un objeto headers es un simple multi-mapa de nombres y valores:</p> + +<pre class="brush: js notranslate">var content = "Hello World"; +var myHeaders = new Headers(); +myHeaders.append("Content-Type", "text/plain"); +myHeaders.append("Content-Length", content.length.toString()); +myHeaders.append("X-Custom-Header", "ProcessThisImmediately");</pre> + +<p>Lo mismo se puede lograr pasando un "array de arrays" o un objeto literal al constructor:</p> + +<pre class="brush: js notranslate">myHeaders = new Headers({ + "Content-Type": "text/plain", + "Content-Length": content.length.toString(), + "X-Custom-Header": "ProcessThisImmediately", +});</pre> + +<p>Los contenidos pueden ser consultados o recuperados:</p> + +<pre class="brush: js notranslate">console.log(myHeaders.has("Content-Type")); // true +console.log(myHeaders.has("Set-Cookie")); // false +myHeaders.set("Content-Type", "text/html"); +myHeaders.append("X-Custom-Header", "AnotherValue"); + +console.log(myHeaders.get("Content-Length")); // 11 +console.log(myHeaders.getAll("X-Custom-Header")); // ["ProcessThisImmediately", "AnotherValue"] + +myHeaders.delete("X-Custom-Header"); +console.log(myHeaders.getAll("X-Custom-Header")); // [ ]</pre> + +<p>Algunas de estas operaciones solo serán utiles en {{domxref("ServiceWorker_API","ServiceWorkers")}}, pero estas disponen de una mejor API para manipular <code>headers</code>.</p> + +<p>Todos los métodosde de <code>headers</code> lanzan un <code>TypeError</code> si un nombre de cabecera no es un nombre de cabecera HTTP válido. Las operaciones de mutación lanzarán un <code>TypeError</code> si hay un guarda inmutable (ver más abajo). Si no, fallan silenciosamente. Por ejemplo:</p> + +<pre class="brush: js notranslate">var myResponse = Response.error(); +try { + myResponse.headers.set("Origin", "http://mybank.com"); +} catch(e) { + console.log("Cannot pretend to be a bank!"); +}</pre> + +<p>Un buen caso de uso para <code>headers</code> es comprobar cuando el tipo de contenido es correcto antes de que se procese:</p> + +<pre class="brush: js notranslate">fetch(myRequest).then(function(response) { + var contentType = response.headers.get("content-type"); + if(contentType && contentType.indexOf("application/json") !== -1) { + return response.json().then(function(json) { + // process your JSON further + }); + } else { + console.log("Oops, we haven't got JSON!"); + } +});</pre> + +<h3 id="Guarda_Guard">Guarda (Guard)</h3> + +<p>Desde que las cabeceras pueden ser enviadas en peticiones y recibidas en respuestas, y tienen limitaciones sobre que información puede y debería ser mutable, los objeto headers tienen una propierdad de guarda. Este no está expuesto a la Web, pero puede afectar a que operaciones de mutación son permitidas sobre el objeto headers.</p> + +<p>Los valores posibles de guarda (guard) son:</p> + +<ul> + <li><code>none</code>: valor por defecto.</li> + <li><code>request</code>: Guarda para el objeto headers obtenido de la petición ({{domxref("Request.headers")}}).</li> + <li><code>request-no-cors</code>: Guarda para un objeto headers obtenido desde una petición creada con {{domxref("Request.mode")}} a <code>no-cors</code>.</li> + <li><code>response</code>: Guarda para una cabecera obetenida desde un respuesta ({{domxref("Response.headers")}}).</li> + <li><code>immutable</code>: Mayormente utilizado para ServiceWorkers, produce un objeto headers de solo lectura.</li> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: No se debería añadir o establecer una petición a un objeto headers <em>guardado</em> con la cabecera <code>Content-Length</code>. De igual manera, insertar <code>Set-Cookie</code> en la respuesta de la cabecera no esta permitido: ServiceWorkers no estan autorizados a establecer cookies a través de respuestas sintéticas.</p> +</div> + +<h2 id="Objetos_Response">Objetos Response</h2> + +<p>Cómo has visto anteriormente, las instancias de {{domxref("Response")}} son devueltas cuando <code>fetch()</code> es resuelto.</p> + +<p>Las propiedades de response que usarás son:</p> + +<ul> + <li>{{domxref("Response.status")}} — Entero (por defecto con valor 200) que contiene el código de estado de las respuesta.</li> + <li>{{domxref("Response.statusText")}} — Cadena (con valor por defecto "OK"), el cual corresponde al mensaje del estado de código HTTP.</li> + <li>{{domxref("Response.ok")}} — Visto en uso anteriormente, es una clave para comprobar que el estado está dentro del rango 200-299 (ambos incluidos). Este devuelve un valor {{domxref("Boolean")}}, siendo <code>true</code> si lo anterior se cumple y <code>false</code> en otro caso.</li> +</ul> + +<p>Estos pueden también creados programáticamente a través de JavaScript, pero esto solamente es realmete útil en {{domxref("ServiceWorker_API", "ServiceWorkers")}}, cuando pones un objeto response personalizado a una respuesta recibida usando un método {{domxref("FetchEvent.respondWith","respondWith()")}}:</p> + +<pre class="brush: js notranslate">var myBody = new Blob(); + +addEventListener('fetch', function(event) { + event.respondWith( + new Response(myBody, { + headers: { "Content-Type" : "text/plain" } + }) + ); +});</pre> + +<p>El constructor {{domxref("Response.Response","Response()")}} toma dos argurmentos opcionales, un cuerpo para la respuesta y un objeto init (similar al que acepta {{domxref("Request.Request","Request()")}}).</p> + +<div class="note"> +<p><strong>Nota</strong>: El método estático {{domxref("Response.error","error()")}} simplemente devuelve un error en la respuesta. De igual manera que {{domxref("Response.redirect","redirect()")}} devuelve una respuesta que resulta en un redirección a una URL especificada. Estos son solo relevantes tambien a ServiceWorkers.</p> +</div> + +<h2 id="Body">Body</h2> + +<p>Tanto las peticiones como las respuestas pueden contener datos body. Body es una instancia de cualquiera de los siguientes tipos:</p> + +<ul> + <li>{{domxref("ArrayBuffer")}}</li> + <li>{{domxref("ArrayBufferView")}} (Uint8Array y amigos)</li> + <li>{{domxref("Blob")}}/File</li> + <li>string</li> + <li>{{domxref("URLSearchParams")}}</li> + <li>{{domxref("FormData")}}</li> +</ul> + +<p>El mixin de {{domxref("Body")}} define los siguientes metodos para extraer un body (implementado por {{domxref("Request")}} and {{domxref("Response")}}). Todas ellas devuelven una promesa que es eventualmente resuelta con el contenido actual.</p> + +<ul> + <li>{{domxref("Body.arrayBuffer","arrayBuffer()")}}</li> + <li>{{domxref("Body.blob","blob()")}}</li> + <li>{{domxref("Body.json","json()")}}</li> + <li>{{domxref("Body.text","text()")}}</li> + <li>{{domxref("Body.formData","formData()")}}</li> +</ul> + +<p>Este hace uso de los datos no texttuales mucho mas facil que si fuera con XHR.</p> + +<p>Las peticiones body pueden ser establecidas pasando el parametro body:</p> + +<pre class="brush: js notranslate">var form = new FormData(document.getElementById('login-form')); +fetch("/login", { + method: "POST", + body: form +});</pre> + +<p>Tanto peticiones y respuestas (y por extensión la function <code>fetch()</code>), intentaran inteligentemente determinar el tipo de contenido. Una petición tambien establecerá automáticamente la propiedad <code>Context-Type</code> de la cabecera si no es ha establecido una.</p> + +<h2 id="Detectar_característica">Detectar característica</h2> + +<p>Puedes comprobar si el navegador soporta la API de Fetch comprobando la existencia de {{domxref("Headers")}}, {{domxref("Request")}}, {{domxref("Response")}} o {{domxref("GlobalFetch.fetch","fetch()")}} sobre el ámbito de {{domxref("Window")}} o {{domxref("Worker")}}. Por ejemplo:</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">if</span> <span class="punctuation token">(</span>self<span class="punctuation token">.</span>fetch<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// run my fetch request here</span> +<span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> + <span class="comment token">// do something with XMLHttpRequest?</span> +<span class="punctuation token">}</span></code></pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Para utilizar <code>fetch()</code> en un explorador no soportado, hay disponible un <a href="https://github.com/github/fetch">Fetch Polyfill</a> que recrea la funcionalidad para navegadores no soportados.</p> + +<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">Comentario</th> + </tr> + <tr> + <td>{{SpecName('Fetch')}}</td> + <td>{{Spec2('Fetch')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<p>{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}</p> + +<h2 id="Vea_también">Vea también</h2> + +<ul> + <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">HTTP access control (CORS)</a></li> + <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> + <li><a href="https://github.com/github/fetch">Fetch polyfill</a></li> + <li><a href="https://github.com/mdn/fetch-examples/">Fetch examples on Github</a></li> +</ul> |