Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Convert to md web/api/fetch_api [es] #9310

Merged
merged 1 commit into from
Oct 17, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 0 additions & 74 deletions files/es/web/api/fetch_api/basic_concepts/index.html

This file was deleted.

70 changes: 70 additions & 0 deletions files/es/web/api/fetch_api/basic_concepts/index.md
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")}}.
81 changes: 0 additions & 81 deletions files/es/web/api/fetch_api/index.html

This file was deleted.

61 changes: 61 additions & 0 deletions files/es/web/api/fetch_api/index.md
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)
Loading