Usando Axios con ReactJS

En este post aprenderemos como realizar un componente en react cuyo objetivo es utilizar axios para mostrar información contenida en un API externo a la aplicación.

¿Qué vamos a necesitar?

• ReactJs
• Axios
• Un navegador

Primero instalamos axios, que es una librería que nos sirve para hacer requests http a los APIs que queremos consultar.

npm install axios --save

GET Requests

Si luego creamos un nuevo componente llamado ListaPersonas, podremos hacer uso del hook componentDidMount en el ciclo de vida y realizar una solicitud GET después de importar axios.

import React from 'react';

import axios from 'axios';

export default class ListaPersonas extends React.Component {
  state = {
    personas: []
  }

  componentDidMount() {
    axios.get(`https://jsonplaceholder.typicode.com/users`)
      .then(res => {
        const personas = res.data;
        this.setState({ personas });
      })
  }

  render() {
    return (
      <div>
        { this.state.personas.map(persona =>{persona.name})}
      </div>
    )
  }
}

Usando axios.get(url) obtenemos una promesa que devuelve un objeto de respuesta. Mientras buscamos los datos de respuesta, asignamos el valor de persona a res.data.

También podemos obtener otra información sobre nuestra solicitud, como el código de estado bajo res.status o más información dentro de res.request.

POST Requests

Podemos manejar otros verbos como POST y PUT de manera similar. Vamos a crear un formulario que reciba algunos datos del usuario y, posteriormente, enviamos el contenido a una API:

import React from 'react';
import axios from 'axios';

export default class ListaPersonas extends React.Component {
  state = {
    name: '',
  }

  handleChange = event => {
    this.setState({ name: event.target.value });
  }

  handleSubmit = event => {
    event.preventDefault();

    const usuario = {
      name: this.state.name
    };

    axios.post(`https://jsonplaceholder.typicode.com/users`, { usuario })
      .then(res => {
        console.log(res);
        console.log(res.data);
      })
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>
            Nombre:
            <input type="text" name="name" onChange={this.handleChange} />
          </label>
          <button type="submit">Agregar</button>
        </form>
      </div>
    )
  }
}

El uso de POST nos brinda el mismo objeto de respuesta con información que podemos usar dentro de nuestra llamada.

DELETE Requests

import React from 'react';
import axios from 'axios';

export default class ListaPersonas extends React.Component {
  state = {
    id: '',
  }

  handleChange = event => {
    this.setState({ id: event.target.value });
  }

  handleSubmit = event => {
    event.preventDefault();

    axios.delete(`https://jsonplaceholder.typicode.com/users/${this.state.id}`)
      .then(res => {
        console.log(res);
        console.log(res.data);
      })
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>
            ID De la Persona:
            <input type="text" name="id" onChange={this.handleChange} />
          </label>
          <button type="submit">Borrar</button>
        </form>
      </div>
    )
  }
}

Una vez más, nuestro objeto res nos proporciona información sobre nuestra solicitud.

Instancia Base

Axios nos permite definir una instancia base en la que podemos definir una URL y cualquier otro elemento de configuración. Vamos a crear un archivo llamado api.js y exportar una nueva instancia de axios con estos valores predeterminados:

import axios from 'axios';

export default axios.create({
  baseURL: `http://jsonplaceholder.typicode.com/`
});

Luego se puede usar dentro de nuestro componente al importar nuestra nueva instancia de la siguiente manera:

import API from '../api';

export default class ListaPersonas extends React.Component {
  handleSubmit = event => {
    event.preventDefault();

    API.delete(`users/${this.state.id}`)
      .then(res => {
        console.log(res);
        console.log(res.data);
      })
  }
}

Usando Async y Await

Podemos hacer que trabajar con promesas sea aún más sencillo con async y await. La palabra clave await resuelve la promesa y devuelve el valor que podemos asignar a una variable. Aquí hay un ejemplo:

handleSubmit = async event => {
  event.preventDefault();

  // Promise is resolved and value is inside of the response const.
  const response = await API.delete(`users/${this.state.id}`);

  console.log(response);
  console.log(response.data);
};