Fetch api vs Axios

Detalles: Publicado: Jueves, 17 Junio 2021 23:22; Escrito por Agustin Luna

A la hora de hacer peticiones http tenemos varias opciones. En este articulo vamos a ver dos mas populares : api fetch y la libreria Axios. Pero, cuál me conviene usar ?

Fetch

Arranquemos definiendo la api fetch. Esta es un metodo del objeto en javascript llamado window, o sea que para utilizarlo no necesitamos instalar nada extra. Simplemente hacemos el llamado escribiendo fetch(url) y esto nos devuelve una promise con la respuesta. En el caso de hacer una petición http GET, el único parámetro obligatorio que recibe fetch es la URL.

Para extraer el body de la respuesta tendremos que usar el metodo .json(). Y con ese valor retornado obtendremos otra promesa en donde viajan los datos que pedimos, accedemos a ellos con .then y utilizando la respuesta pasada por parámetro, en este caso le pusimos data.

    fetch('https://pokeapi.co/api/v2/pokemon')
	.then(response => response.json())
	.then(data => {
		console.log(data);
	})

Como mencionamos más arriba, fetch recibe un segundo parámetro que sólo es obligatorio si queremos hacer una peticion que no sea GET o una petición GET con una configuración determinada. Si quisieramos utilizar otra petición, tendríamos que pasarle como segundo parámetro un objeto indicando los campos de la petición, por ejemplo método, el body.

Un ejemplo de una petición POST :

    fetch(url, {
        method : 'POST',
        headers: {
            'Content-Type' : 'application/json'
        },
        body: JSON.stringify({
            name: 'Flipper'
        });
    })
        .then(response => response.json())
        .then(data => {
            console.log(data);
        })

Manejo de errores fetch

Cuando obtenemos la respuesta, tenemos que cheuquear si el estado fue exitoso, ya que la api fetch nos devolverá la respuesta aún si no fue exitoso. En el único caso en el que una promesa no se cumple es si la petición no pudo completarse.

    fetch('https://pokeapi.co/api/v2/pokemon')
	.then((response) => {
		
		if (!response.ok) {
			throw Error(response.statusText);
		}
		
		return response.json()
	})
	.then(data => console.log(data))
	.catch( err => console.log(err))

Axios

Axios por otro lado es una libreria de javascript . Hay que en importarla en nuestro proyecto por cdn o instalarla. Al igual que fetch, axios se basa en promises. Si vamos a hacer una petición GET, sólo debemos llamar al método desde axios agregandole ..get(url) :

    axios.get(url)
	.then(response => console.log(response.data));

Como vemos en el ejemplo, la libreria axios directamente nos provee de la respuesta, y tan solo tenemos que indicarle que queremos el data de la respuesta y ya tenemos los datos que pedimos ! En el caso que queramos hacer una petición GET con una configuración customizada, u otras peticiones como POST, DELETE, tendremos que pasarle por parámetro a axios un objeto con la configuración de la petición indicando método, url, los datos a enviar dentro de un objeto llamado data.

Asi seria un POST con axios :

const configuracion = {
	
    method: 'POST',
	url: 'https://jsonplaceholder.typicode.com/posts',
	data: {
		title: 'Post a la api',
		body: 'Nuevo',
		userId: 11
    }
}

axios(configuracion)
	.then(res => console.log(res.data);

Manejo de errores axios

En axios no hay mucho que explicar sobre el manejo de errores. En caso de que falle la petición o la respuesta, la promesa no se cumplirá e irá al catch.

axios(configuracion)
	.then(res => console.log(res.data)
	.catch(err => console.log(err));

Conclusión

Si bien vimos que la sintaxis mucho no varía, la que nos provee axios es mucho más amigable y no tenemos que parsear ni el body de la petición ni la respuesta, esto nos ahorra tener que acordarnos de esos detalles. Por otro lado, a la hora del manejo de errores, axios vuelve a ganar ya que vimos que fetch no es muy intuitivo a la hora de fallar ya que siempre nos da una respuesta por más que falle.

En conclusión, si vamos a crear un proyecto en dónde haya muchas peticiones http, nos convendría usar axios por su manejo de errores y su sintaxis straight-forward. Pero en el caso de un proyecto más chico, nos podemos arreglar con la api fetch.

JavaScript