# AJAX | Peticiones GET - AXIOS

## Introducción

Hay muchos recursos en Internet que podemos usar para nuestras propias aplicaciones, no solo para recuperar datos sino también para habilitar funcionalidades. Piense en Google Maps, Mailchimp o muchos otros.

Por otro lado, a veces simplemente queremos obtener información para almacenarla en la base de datos de nuestra aplicación o como entrada para la lógica de nuestras aplicaciones en el servidor.


El problema surge cuando queremos incluir esa funcionalidad en nuestra aplicación y usarla sin recargar todo el HTML cada vez que hacemos una solicitud a un servidor remoto.

Ahí es donde Axios nos salva el día.

## Introducción a Axios

Axios es un cliente HTTP **basado en promesas** para JavaScript que se puede utilizar en su aplicación front-end y en su backend Node.js.

Al usar Axios, es fácil enviar solicitudes HTTP asíncronas a puntos finales REST y realizar operaciones CRUD *(Create, Read, Update, Delete)*.

### Principales características

- Realizar [XMLHttpRequests](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) desde el navegador
- Realizar solicitudes HTTP desde [Node.js](https://nodejs.org/api/http.html)
- Permite utilizar la [API Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
- Interceptar solicitudes y respuestas
- Transformar solicitudes y datos de respuestas.
- Cancelar solicitudes
- Transformar de forma automática JSON en objetos Javascript
- Soporte del lado del cliente para protegerse contra [XSRF](https://en.wikipedia.org/wiki/Cross-site_request_forgery)

## Alias de los métodos de solicitud

Para hacer más fácil la utilización de los mismos, fueron desarrollados *alis* para todos los métodos de solicitud permitidos.

- `axios.request(config)`

- `axios.get(url[, config])`

- `axios.delete(url[, config])`

- `axios.head(url[, config])`

- `axios.options(url[, config])`

- `axios.post(url[, data[, config]])`

- `axios.put(url[, data[, config]])`

- `axios.patch(url[, data[, config]])`

**Cuando utilizamos el alias, las propiedades `url`, `method`, y `data` no tienen que ser especificadas en `config`.**

### Usos comunes de Axios

Algunos ejemplos sobre cuándo utilizar las llamadas de Axios:

- Al actualizar datos o parte de la estructura de un HTML
- En validaciones de formularios
- Al filtrar datos
- Al hacer comentarios
- Al leer archivos

## Instalación de Axios

Podemos instalar Axios con **NPM** o podemos agregarlo a través de un CDN (más fácil y rápido :wink:).

**Usando CDN**

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

**Usando NPM**

$ npm install axios

## Probando APIs

Internet está lleno de API gratuitas disponibles para desarrolladores. Google, YouTube, Yahoo, Instagram, Twitter, Flickr, LinkedIn y muchas más aplicaciones enormes y famosas proporcionan una API gratuita para integrarse a nuestras plataformas. Usaremos PokeAPI para hacer un ejemplo de cómo funciona AJAX.

### La PokeAPI


La [pokeapi](http://pokeapi.co/) es una API REST creada por Paul Hallet. Esta API proporcionará información sobre todo lo relacionado con [el Mundo Pokemon](https://en.wikipedia.org/wiki/Pok%C3%A9mon), un mundo lleno de pequeñas criaturas llamadas Pokemon.

### Pruebas de API en el sitio web del propietario

En la página principal (pokeapi.co) puede probar una solicitud para verificar la respuesta de la API.

Ve a [pokeapi.co](http://pokeapi.co/). En el campo abierto, envíe una solicitud. Probemos con el `pokemon/1`.


El resultado es un objeto JSON con la información del Pokémon que posee el id 1.

### Prueba de API en la barra de navegación del navegador

Puedes probarlo también en tu navegador. Copie la solicitud en la barra de navegación y mire lo que devuelve:


**:bulb: Es posible que su navegador muestre un objeto diferente y sin formato. Si eso sucede, intente instalar la extensión [JSON Viewer](https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=en).**

## Postman

[Postman](https://www.getpostman.com/docs) nos permite probar solicitudes de API web desde nuestro sistema. Podríamos configurar los parámetros deseados como si estuviéramos en nuestro propio código.

Podemos usar cualquier método HTTP para la solicitud y podemos usar cualquier cantidad de parámetros.

### Instalar Postman


Vamos a la [web oficial](https://www.getpostman.com) y descargamos Postman. Tené cuidado de seleccionar el sistema operativo adecuado para su computadora.

También podemos usar Postman como una extensión de Google Chrome, pero usaremos la versión [GUI](https://en.wikipedia.org/wiki/Graphical_user_interface) ya que es más intuitiva.

**También existe [Insomnia](https://insomnia.rest) que tiene características similares.**

### Peticiones GET

Abrimos Postman. Veríamos algo cómo esto:


Por ahora, nos centraremos en la barra de navegación:


- **La barra de navegación** simula la barra de navegación del navegador
- **La entrada `select`** a la izquierda indica el método HTTP que deseamos usar en la solicitud
- **El botón *Params*** a la derecha es para especificar parámetros en la solicitud. Si el método HTTP utilizado es *GET*, agregará los parámetros en la *cadena de consulta* de la URL
- **El botón *GUARDAR*** te permite guardar la solicitud, en caso de que quieras repetir la misma solicitud. Esto es útil cuando está introduciendo los mismos datos repetidamente.
- **El botón *ENVIAR*** creará la solicitud y la enviará.

Probemos la solicitud PokeAPI de Postman


Cuando se hace clic en el botón *ENVIAR*, Postman mostrará la información relacionada con la respuesta en el panel de abajo.


Es realmente similar a lo que nos permite hacer Pokeapi. El hecho es que la mayoría de las API no tienen esta función incluida en sus páginas web y la documentación no está tan bien explicada.

## Llamadas Axios

### Axios GET call

Una llamada estándar de Axios para cualquier solicitud HTTP es una función `axios()` que recibe un objeto JavaScript que especifica diferentes opciones de la solicitud.

Dado que **Axios** está basado en *Promises*, necesitamos agregar nuestro `.then()` para procesar la respuesta, y el método `.catch()` en caso de que haya un error en la respuesta.

Estas son las opciones más habituales:

axios({
  method: "El método HTTP que vamos a utilizar",
  url: "La URL que el servidor va a recibir.", 
  params: "Los parámetros de la URL que van a enviarse" ,
})
.then(response => {
  //Acá podemos manipular la respuesta como querramos
})
.catch(err => {
  //Acá capturamos algún potencial error que pueda ocurrir
})

Hay muchas otras opciones que podemos configurar en nuestras solicitudes **Axios**. Podemos consultarlos todos en la [Documentación de Axios](https://github.com/axios/axios#request-config)

- **`baseURL`**: Será antepuesta a la `url`
- **`responseType`**: indica el tipo de datos que responderá el servidor. Las opciones son `arraybuffer`, `blob`, `document`, `json`, `text`, `stream`.
- **`maxContentLength`**:define el tamaño máximo del contenido de respuesta http permitido.

**:eyes: Revisa la documentación oficial para ver la lista completa de opciones disponibles.**

### Hacer una petición a una REST API

Vamos a obtener esa información de Pokémon a través de una llamada de Axios usando la estructura que acabamos de ver. Creemos 2 archivos:

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <h1>Pokemon info</h1>
  <p id="pokeInfo"></p>
  <button id="pokeButton">Get Pokemon!</button>

  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script type="text/javascript" src="index.js"></script>
</body>
</html>

// index.js

const pokeApi = axios.create({
    baseURL: 'https://pokeapi.co/api/v2/pokemon'
})

function getPokemonInfo(id) {
  pokeApi.get(id)
  .then(response => {
    console.log(response.data)
  })
  .catch(err => {
    console.error(err)
  })
}

document.getElementById("pokeButton").onclick = function(){
  getPokemonInfo("1");
}

:exclamation: **La mayoría de las veces usamos la sintaxis `axios.get(URL, body)` ya que es más fácil de leer.**

:::danger
For PokeAPI, you must call the API with "**https**" and not "**http**", otherwise the API call will be probably blocked by your browser.
:::

El concepto clave de las solicitudes de Axios: **¡no hay recarga de página!**

Recuerde que normalmente, después de cada solicitud HTTP, la página se actualiza con una página nueva completa para mostrar. Si ese fuera el caso, la consola estaría vacía.

## Recursos Extra

- [AXIOS Docs](https://github.com/axios/axios)
- [Postman](https://www.getpostman.com/docs/) - Official documentation