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, 0 insertions, 377 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 deleted file mode 100644 index 51617ad047..0000000000 --- a/files/es/web/api/fetch_api/utilizando_fetch/index.html +++ /dev/null @@ -1,377 +0,0 @@ ---- -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 imprimiendo en la consola. El uso de <code>fetch()</code> más simple toma un argumento (la ruta del recurso que quieres obtener) 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> |