-
Notifications
You must be signed in to change notification settings - Fork 8.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Convert to md web/api/fetch_api [es] (#9310)
- [x] fetch_api - [x] using_fetch - [x] basic_concepts
- Loading branch information
Showing
6 changed files
with
496 additions
and
520 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,70 @@ | ||
--- | ||
title: Conceptos básicos de Fetch | ||
slug: Web/API/Fetch_API/Basic_concepts | ||
translation_of: Web/API/Fetch_API/Basic_concepts | ||
original_slug: Web/API/Fetch_API/Conceptos_basicos | ||
--- | ||
{{DefaultAPISidebar("Fetch API")}} | ||
|
||
La [API Fetch](/es/docs/Web/API/Fetch_API) proporciona una interfaz para obtener recursos (incluso a traves de la red). Parecera familiar a quien sea que haya usado {{domxref("XMLHttpRequest")}}, pero proporciona un conjunto de características más potentes y flexibles. Este artículo explica algunos de los conceptos básicos de la API Fetch. | ||
|
||
> **Nota:** Este artículo será añadido en un futuro. Si encuenta un concepto de Fetch que siente necesita una mejor explicación, hagalo saber a alguien en el [foro de discusión de ](https://discourse.mozilla-community.org/c/mdn)[MDN](https://discourse.mozilla-community.org/c/mdn), o [Mozilla IRC](https://wiki.mozilla.org/IRC) (#mdn room.) | ||
## En pocas palabras | ||
|
||
En el corazón de Fetch estan las abstracciones de interfaz de cargas de HTTP {{domxref("Request")}}s, {{domxref("Response")}}s, {{domxref("Headers")}}, y {{domxref("Body")}}, junto a un método {{domxref("GlobalFetch.fetch","global fetch")}} para inicializar peticiones de recurso asíncronos. Porque los prinipales componentes de HTTP son abstraídos como objetos Javascript, es sencillo para otras APIs el hacer uso de dicha funcionalidad. | ||
|
||
[Service Workers](/es/docs/Web/API/ServiceWorker_API) es un ejemplo de una API que hace un fuerte uso de Fetch. | ||
|
||
Fetch toma la naturaleza asíncrona de dichas peticiones un paso adelante. La API esta completamente basada en {{jsxref("Promise")}}. | ||
|
||
## Guard | ||
|
||
Guard es una característica de objetos {{domxref("Headers")}}, con los valores posibles `immutable`, `request`, `request-no-cors`, `response`, o `none`, dependiendo de donde el encabezado es usado. | ||
|
||
Cuando un nuevo objeto {{domxref("Headers")}} es creado usando el {{domxref("Headers.Headers","Headers()")}} {{glossary("constructor")}}, su guarda (guard) se establece a `none` (por defecto). Cuando un objeto {{domxref("Request")}} o {{domxref("Response")}} es creado, tiene un objeto {{domxref("Headers")}} asociado cuyo guarda (guard) se establece como se resume a continuación: | ||
|
||
<table class="standard-table"> | ||
<thead> | ||
<tr> | ||
<th scope="row">nuevo tipo de objeto</th> | ||
<th scope="col">creando el constructor</th> | ||
<th scope="col"> | ||
configuraciones de guarda (guard) del objeto | ||
{{domxref("Headers")}} asociado | ||
</th> | ||
</tr> | ||
</thead> | ||
<tbody> | ||
<tr> | ||
<td rowspan="2">{{domxref("Request")}}</td> | ||
<td>{{domxref("Request.Request","Request()")}}</td> | ||
<td><code>request</code></td> | ||
</tr> | ||
<tr> | ||
<td> | ||
{{domxref("Request.Request","Request()")}} con | ||
{{domxref("Request.mode","mode")}} de <code>no-cors</code> | ||
</td> | ||
<td><code>request-no-cors</code></td> | ||
</tr> | ||
<tr> | ||
<td rowspan="2">{{domxref("Response")}}</td> | ||
<td>{{domxref("Response.Response","Response()")}}</td> | ||
<td><code>response</code></td> | ||
</tr> | ||
<tr> | ||
<td> | ||
Métodos {{domxref("Response.error","error()")}} o | ||
{{domxref("Response.redirect","redirect()")}} | ||
</td> | ||
<td><code>immutable</code></td> | ||
</tr> | ||
</tbody> | ||
</table> | ||
|
||
Un guarda (guard) de encabezado afecta los métodos {{domxref("Headers.set","set()")}}, {{domxref("Headers.delete","delete()")}}, y {{domxref("Headers.append","append()")}} que cambían los contenidos del encabezado. Un `TypeError` es arrojado si se trata modificar un objeto {{domxref("Headers")}} cuyo guarda (guard) es `immutable`. Sin embargo, la operación funcionará si | ||
|
||
- guard es `request` y el nombre del encabezado no es un {{Glossary("forbidden header name")}} . | ||
- guard es `request-no-cors` y el encabezado _nombre/valor_ es un {{Glossary("simple header")}} . | ||
- guard es `response` y el \_nombre \_del encabezado no es {{Glossary("forbidden response header name")}}. |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,61 @@ | ||
--- | ||
title: Fetch API | ||
slug: Web/API/Fetch_API | ||
translation_of: Web/API/Fetch_API | ||
browser-compat: api.fetch | ||
--- | ||
{{DefaultAPISidebar("Fetch API")}} | ||
La API Fetch proporciona una interfaz para recuperar recursos (incluso a través de la red). Resultará familiar a cualquiera que haya usado {{domxref("XMLHttpRequest")}}, pero la nueva API ofrece un conjunto de características más potente y flexible. | ||
|
||
## Conceptos y uso | ||
|
||
Fetch ofrece una definición genérica de los objetos {{domxref("Request")}} y {{domxref("Response")}} (y otras cosas relacionadas con las solicitudes de red). Esto permitirá su uso donde sea necesario en un futuro, ya sea para operadores de servicios, API caché y otras cosas similares que manipulen o modifiquen las solicitudes y respuestas, o cualquier otro tipo de caso de uso que pudiera requerirle la generación de sus propias respuestas mediante programación. | ||
|
||
También proporciona una definición para conceptos relacionados, como CORS y la semántica de encabezado HTTP origen, suplantando sus definiciones separadas en otros lugares. | ||
|
||
Para hacer una solicitud y recuperar un recurso, utilice el método {{domxref("GlobalFetch.fetch")}}. Se implementa en múltiples interfaces, específicamente {{domxref("Window")}} y {{domxref("WorkerGlobalScope")}}. Esto hace que esté disponible en casi cualquier contexto donde quiera buscar recursos. | ||
|
||
El método `fetch()` toma un argumento obligatorio, la ruta de acceso al recurso que desea recuperar. Devuelve una {{domxref("Promise")}} que resuelve en {{domxref("Response")}} a esa petición, sea o no correcta. También puede pasar opcionalmente un objeto de opciones init como segundo argumento (ver {{domxref("Request")}}). | ||
|
||
Una vez que {{domxref("Response")}} es recuperada, hay varios métodos disponibles para definir cuál es el contenido del cuerpo y como se debe manejar (ver {{domxref("Body")}}). | ||
|
||
Puede crear una solicitud y respuesta directamente a con los constructores {{domxref("Request.Request","Request()")}} y {{domxref("Response.Response","Response()")}}, pero no es recomendable hacerlo directamente. En su lugar, es preferible que sean creados como resultado de otras acciones de la API (por ejemplo, {{domxref("FetchEvent.respondWith")}} desde los operadores de servicios). | ||
|
||
> **Nota:** Puede encontrar mas información sobre las características de la API Fetch en [Usando Fetch](/es/docs/Web/API/Fetch_API/Using_Fetch), y aprender los conceptos en [Fetch: conceptos básicos](/es/docs/Web/API/Fetch_API/Basic_concepts). | ||
### Abortar una petición | ||
|
||
Los navegadores han empezado a añadir soporte experimental para las interfaces {{domxref("AbortController")}} y {{domxref("AbortSignal")}} (Conocidas también como La API Abort), las cuales permiten que operaciones como Fetch y XHR puedan ser abortadas si no han terminado todavía. Visita las páginas de las interfaces para más detalles. | ||
|
||
## Fetch Interfaces o Métodos | ||
|
||
- {{domxref("GlobalFetch")}} | ||
- : Contiene el método `fetch()` utilizado para obtener o inicializar un recurso. | ||
- {{domxref("Headers")}} | ||
- : Representa los encabezados de la respuesta/solicitud, lo que le permite consultar y tomar diferentes acciones en función de los resultados. | ||
- {{domxref("Request")}} | ||
- : Representa una solicitud de recursos. | ||
- {{domxref("Response")}} | ||
- : Representa la respuesta a una solicitud. | ||
|
||
## Fetch mixin | ||
|
||
- {{domxref("Body")}} | ||
- : Proporciona métodos relacionados con el contenido de la respuesta/solicitud, lo que le permite declarar cuál es su tipo y cómo debe manejarse. | ||
|
||
## Especificaciones | ||
|
||
{{Specifications}} | ||
|
||
## Compatibilidad de navegadores | ||
|
||
{{Compat}} | ||
|
||
## Ver también | ||
|
||
- [ServiceWorker API](/es/docs/Web/API/ServiceWorker_API) | ||
- [HTTP access control (CORS)](/es/docs/Web/HTTP/Access_control_CORS) | ||
- [HTTP](/es/docs/Web/HTTP) | ||
- [Fetch polyfill](https://github.com/github/fetch) | ||
- [Fetch basic concepts](/es/docs/Web/API/Fetch_API/Basic_concepts) | ||
- [Fetch API Examples](http://davidwalsh.name/fetch) |
Oops, something went wrong.