diff options
author | MDN <actions@users.noreply.github.com> | 2021-09-01 00:52:00 +0000 |
---|---|---|
committer | MDN <actions@users.noreply.github.com> | 2021-09-01 00:52:00 +0000 |
commit | af3288b106f44aaaa2c80d499ec669383d6f7203 (patch) | |
tree | 6d5a402249e4e8a83820c2592887062ec9202d79 /files/es/web/api/windoworworkerglobalscope/fetch/index.html | |
parent | 1768b43f574673545e1f2a20e92a27b050a2bb53 (diff) | |
download | translated-content-af3288b106f44aaaa2c80d499ec669383d6f7203.tar.gz translated-content-af3288b106f44aaaa2c80d499ec669383d6f7203.tar.bz2 translated-content-af3288b106f44aaaa2c80d499ec669383d6f7203.zip |
[CRON] sync translated content
Diffstat (limited to 'files/es/web/api/windoworworkerglobalscope/fetch/index.html')
-rw-r--r-- | files/es/web/api/windoworworkerglobalscope/fetch/index.html | 177 |
1 files changed, 0 insertions, 177 deletions
diff --git a/files/es/web/api/windoworworkerglobalscope/fetch/index.html b/files/es/web/api/windoworworkerglobalscope/fetch/index.html deleted file mode 100644 index 9540fe5d05..0000000000 --- a/files/es/web/api/windoworworkerglobalscope/fetch/index.html +++ /dev/null @@ -1,177 +0,0 @@ ---- -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> |