# AJAX | Axios POST & PUT
## Introducción
Además de realizar solicitudes GET para recuperar información de las API con **Axios**, es igualmente importante poder **enviar información a las API**. Con **Axios** la idea es realizar transacciones como esas **sin actualizar la página**.
Hay dos situaciones en las que queremos enviar información a las API:
1. Guardar nueva información en la API (POST)
2. Actualizar información existente en la API (PUT/PATCH)
Para guardar nueva información, el verbo HTTP correcto a usar es **POST**, al igual que con los envíos de formularios. Probablemente haya utilizado una aplicación web que realiza POST con **Axios** sin darse cuenta.
**Ejemplos de **Axios** solicitudes POST** (sin actualización de página):
- Hacer una nueva publicación en Facebook o Twitter
- Envío de un correo electrónico en Gmail
- Dar Me gusta algo en Facebook
Para actualizar la información existente, hay dos métodos HTTP que encajan: **PUT** y **PATCH**. Su semántica es ligeramente diferente, pero esa pequeña diferencia no es realmente importante. Cuando realizamos una solicitud PUT o PATCH, la API nos permite modificar los detalles de algo existente.
**Ejemplos de solicitudes AJAX PUT / PATCH** (sin actualización de página):
- Editar un mensaje en Slack (sí, puedes hacerlo)
- Marcar un correo electrónico como no leído / leído
- Cambiar tu Me gusta de Facebook
## API de personajes de películas de Ironhack
Para esta lección utilizaremos la API de personajes de películas de Ironhack. Permite hacer CRUD (Create, Read, Update, Delete) de personajes. Cada personaje tiene estas propiedades:
- `name` - String
- `occupation` - String
- `weapon` - String
- `debt` - Boolean (optional, defaults to `false`)
Aquí están los endpoints (rutas) de API relevantes que usaremos:
| Route | HTTP Verb | Description |
|-------------------|-----------|---------------------------------|
| `/characters` | GET | Listar todos los personajes |
| `/characters/:id` | GET | Detalles de un personaje específico |
| `/characters` | POST | Crear un nuevo personaje |
| `/characters/:id` | PUT/PATCH | Actualizar un personaje específico |
Todas estas rutas deben tener como prefijo la URL base de la API: https://ih-crud-api.herokuapp.com. Verás esto a menudo con la documentación de la API: te brindan las rutas asumiendo que agregará la URL base.
Por ejemplo, la URL completa de la ruta `/characters` sería: https://ih-crud-api.herokuapp.com/characters. Intenta visitarlo en Postman.
## Método POST con Axios
Creamos una nueva carpeta llamada `axios-post-put/` para esta lección con estos contenidos:
```
axios-post-put/
├── index.html
└── index.js
```
Esto es lo que debemos poner en el archivo `index.html`:
```htmlmixed=
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Axios - POST, PATCH & PUT </title>
</head>
<body>
<h1> Axios AJAX - POST, PATCH & PUT </h1>
<button id="post-wall-e"> Post WALL-E </button>
<ul id="characters-list"></ul>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="index.js"></script>
</body>
</html>
```
En el archivo `index.js`:
```javascript=
// When the WALL-E button is clicked
document.getElementById("post-wall-e").onclick = function() {
// Create an object with data to submit
const characterInfo = {
name: 'WALL-E',
occupation: 'Waste Allocation Robot',
weapon: 'Head laser'
};
// Make a POST request
axios.post('https://ih-crud-api.herokuapp.com/characters',characterInfo)
.then(response => {
console.log('post success');
console.log(response)
})
.catch(error => {
console.log('Oh No! Error!');
console.log(error)
})
}
```
Abrimos el archivo `index.html` y hacemos clic en el botón WALL-E. Cuando se hace clic en el botón, nuestro código realizará una solicitud POST **Axios** para agregar WALL-E a la API. Tenga en cuenta que estamos usando la clave `data` para proporcionar la información de WALL-E a la API.
En la devolución de llamada exitosa usamos `console.log` para mostrar la respuesta de la API. Siempre que utilice datos de terceros, **siempre debe registrar la respuesta de una API** para verificar la estructura de los datos. Conocer la estructura de la respuesta le permite brindar retroalimentación al usuario.
Ahora cambiemos lo que hacemos con la respuesta de la API para proporcionar comentarios. Agreguemos el nombre y la identificación del personaje recién creado al DOM:
```javascript=
function showFeedback (postResponse) {
const newCharacterHtml =
`
<li>
<h3> ${response.data.name} </h3>
<p> Id: ${response.data.id} </p>
</li>
`;
document.getElementById("characters-list").innerHTML += newCharacterHtml;
}
```
Sin embargo, ¿cómo podemos saber que esto realmente está funcionando? ¡Usemos Postman para mostrar los detalles del personaje que hemos creado! Visite la ruta GET `/characters/:id` en Postman con el `:id` reemplazado por el ID de su WALL-E.
**Si visitamos la ruta GET `/characters`, también verás todos los WALL-Es que todos hemos creado hasta ahora.**
## Usando un form con Axios
Tener un botón WALL-E está bueno, pero realmente nos gustaría presentarle al usuario un formulario para que pueda ingresar la información del personaje que desea agregar.
Con **Axios** podemos hacer esto **sin actualizar la página**, pero funciona de manera un poco diferente a los envíos de formularios normales. Agreguemos un formulario a nuestro HTML.
```htmlmixed=
<h3> Post a new character </h3>
<form id="character-form">
<div>
<label for="the-name-input"> Name: </label>
<input type="text" name="name" id="the-name-input">
</div>
<div>
<label for="the-occupation-input"> Occupation: </label>
<input type="text" name="occupation" id="the-occupation-input">
</div>
<div>
<label for="the-weapon-input"> Weapon: </label>
<input type="text" name="weapon" id="the-weapon-input">
</div>
<button> Post this character </button>
</form>
```
En lo que respecta a nuestro JavaScript, podemos usar el evento `submit` de la etiqueta`<form>` en lugar del evento`click` de la etiqueta `<button>`:
```javascript=
document.getElementById("character-form").onsubmit = function() {
console.log('form submit');
};
```
¡Podemos ver que nuestro *log* desaparece cuando hacemos eso! **Eso es porque el envío del formulario está actualizando la página**. Necesitamos evitar que haga eso. **Podemos cortocircuitar el envío del formulario regular** con el método `preventDefault` del evento`submit`:
```javascript=
document.getElementById("character-form").onsubmit = function() {
//
//
//
event.preventDefault();
console.log('form submit');
};
```
Ahora podemos hacer nuestra petición Axios:
```javascript=
document.getElementById("character-form").onsubmit = function() {
event.preventDefault();
const characterInfo = {
name: document.getElementById("the-name-input").value,
occupation: document.getElementById("the-occupation-input").value,
weapon: document.getElementById("the-weapon-input").value
};
axios.post('https://ih-crud-api.herokuapp.com/characters', characterInfo)
.then(response => {
const newCharacterHtml = `
<li>
<h3> ${response.data.name} </h3>
<p> Id: ${response.data.id} </p>
</li>
`;
document.getElementById("characters-list").innerHTML += newCharacterHtml;
})
.catch(error => {
console.log(error)
})
});
```
¡Es básicamente el mismo POST **Axios** que antes! La única diferencia es que en lugar de codificar la información, seleccionamos las entradas con *Javascript* y usamos la propiedad `value` para recuperar sus valores (lo que el usuario ha escrito).
Usa Postman nuevamente para mostrar los detalles de tu personaje. Visite la ruta GET `/characters/:id` en Postman con el `:id` reemplazado por el ID que se muestra en la pantalla.
## Métodos PATCH/PUT con Axios
Ahora que el método POST ya está hecho, creemos otro formulario para actualizar la información de un personaje específico con **PATCH o PUT**. En esta API **podrás usar cualquiera de esos 2 métodos HTTP** y hará lo mismo.
Además, tengamos en cuenta que debe especificar el ID del personaje que desea modificar en la URL.
Comencemos agregando una segunda forma:
```htmlmixed=
<h3> Update a character </h3>
<form id="update-form">
<div>
<label for="update-name-input"> Name: </label>
<input type="text" name="name" id="update-name-input">
</div>
<div>
<label for="update-occupation-input"> Occupation: </label>
<input type="text" name="occupation" id="update-occupation-input">
</div>
<div>
<label for="update-weapon-input"> Weapon: </label>
<input type="text" name="weapon" id="update-weapon-input">
</div>
<div>
<label for="character-id-input"> Character ID: </label>
<input type="text" name="characterId" id="character-id-input">
</div>
<button> Update this character </button>
</form>
```
Aunque esta forma es básicamente idéntica, **todos los atributos `id` tienen que ser diferentes**. También hemos agregado una **entrada adicional para la identificación del personaje**.
Ahora para nuestro evento de JavaScript:
```javascript=
document.getElementById("update-form").onsubmit = function() {
event.preventDefault();
const updateInfo = {
name: document.getElementById("update-name-input").value,
occupation: document.getElementById("update-occupation-input").value,
weapon: document.getElementById("update-weapon-input").value
};
const charId = document.getElementById("character-id-input").value;
axios.patch(`https://ih-crud-api.herokuapp.com/characters/${charId}`, updateInfo)
.then(response => {
console.log("Update SUCCESS!")
})
.catch(error => {
console.log(error)
})
}
```
Observemos cómo obtuvimos el `charId` de la nueva entrada que agregamos. Podemos ver que el `charId` se interpola en la URL.
Intentemos actualizar uno de tus personajes creados ingresando su ID. ¡Y confirmemos que funcionó con Postman!
**No tenemos que completar todas las entradas para una actualización. Solo completamos los valores que desea cambiar.**
## Recursos Extra
- [Using HTTP Methods](http://www.restapitutorial.com/lessons/httpmethods.html)
Sign in with Wallet
Connect another wallet