Cursos de páginas web

Ejemplos de uso de fetch API en Javascript

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

Curso de Javascript Online. Desde cero.

1.  
2.  
3.  
4.  
5.  
6.  
7.  
8.  
9.  
10.  
11.  
12.  
13.  
14.  
15.  
16.  
17.  
18.  
19.  
20.  
21.  
22.  
23.  
24.  
25.  
26.  
27.  
28.  
29.  
30.  
31.  
32.  
33.  
34.  
35.  
36.  
37.  
38.  
39.  
40.  
41.  
42.  
43.  
44.  
45.  
46.  
47.  

La fetch API nos permite acceder a recursos de un servidor de manera asíncrona (peticiones Ajax). Este tipo de peticiones nos permiten realizar solicitudes HTTP sin necesidad de recargar toda la página.

Para utilizar fetch API no es necesario usar ninguna librería. Funcionan haciendo uso del código nativo del navegador.

La API fetch utiliza promesas, es decir, devuelve un objeto con dos métodos, uno then() y otro catch() a los que pasaremos una función que será invocada cuando se obtenga la respuesta o se produzca un error.

RESTful verbs

Petición GET

Este tipo de petición (hay otros tipos de peticiones como PUT, POST, DELETE…) se utiliza fundamentalmente para obtener datos de la fuente especificada (habitualmente un servicio web).

No obstante, si tuviesemos que enviar información delicada, por ejemplo para hacer un login, usaríamos POST en lugar de GET.

Sin parámetros a una API externa

Para este ejemplo, vamos a consultar los datos de la API de StarWars.

fetch('https://swapi.co/api/people/1/')
.then(res => res.json())
.then(res => console.log(res));
.catch( err => console.error(err));
  1. Hemos llamado a fetch() con la URL a la que queremos acceder como parámetro. Esta llamada nos devuelve una promesa.
  2. El método then() de esa promesa nos entrega un objeto response.
    A partir de este objeto llamamos al método json() para obtener el cuerpo de la respuesta. Este método json() nos devuelve otra promesa que se resolverá cuando se haya obtenido el contenido.
  3. El método then() de esta segunda promesa recibe el cuerpo devuelto por la promesa anterior y hace un log de ella.
  4. Hemos incluido un catch() por si se produce algún error

Sin parámetros a un fichero local

fetch('biblioteca.json')
.then(res => res.json())
.then(res => console.log(data.titulo));

En un documento JSON correcto, los nombres de las propiedades deben ir entre comillas dobles.

biblioteca.json
 [
    {  
       "titulo": "La Aventura",  
       "autor": "Paco"  
    },  
    {  
       "titulo":"Las cosas",  
       "autor": "Pac"  
    }  
]

Petición POST

La utilizaremos para insertar nuevos registros.

fetch('http://localhost:3009/users', {
    method: 'POST',
    headers: {
        "Content-Type": "application/json",
    },
    body: JSON.stringify({ mail: 'pp@pp.com', password: '123' })
})
.then(res => res.json())
.then(res=> {
      console.log(res);
});

Petición PUT

La utilizaremos para actualizar información existente.

Enviaremos la información que queremos actualizar en el cuerpo de la petición y la id del elemento que queremos actualizar en la url de la petición.

fetch('http://localhost:3005/users/1', {
        method: 'PUT',
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify({ mail: 'ññññ', password: 'ññññ' })
 })
.then(res => res.json())
.then(res=> {
      console.log(res);
});

Petición Delete

La utilizaremos para eliminar información existente.

fetch('http://localhost:3005/users/2', {
      method: 'DELETE',
})
.then(res => res.json())
.then(res=> {
      console.log(res);
});

Ejercicio Fetch

Haz la siguiente petición:

https://api.mercadolibre.com/sites/MLA/search?q=malabares

y recorre el resultado para mostrar una lista con los datos recuperados

Algunas API’s interesantes

Directorio de API’s públicas:

https://github.com/public-apis/public-apis

← Juego de palabras
Como funciona la asincronía en Javascript →