📅 Mié, 29 May 2019 ⏲️ ~ 3 minutos

Cómo consumir un API Rest con la librería de Javascript Axios

Axios es una popular librería Open Source para Javascript que nos permite realizar operaciones como cliente HTTP, basado en el modelo de promesas.

Axios destaca por su sencillez y ligereza, lo cual lo hace indicado para proyectos incluso en procesadores de baja potencia como el ESP8266 o el ESP32.

Asimismo, proporciona una capa unificada para la realización de peticiones Ajax, independiente de otros framework que usemos en el proyecto. Es compatible con la mayoría de navegadores actuales. Es Open Source y su código está disponible en https://github.com/axios/axios.

Cómo instalar Axios

El proceso de instalación es muy sencillo. Podemos usar un gestor de paquete como NPM, Bower o Yarn. Por ejemplo, en NPM sería

npm install axios

O podemos añadirlo directamente desde un CDN de la siguiente forma:

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

Ejemplo básico de Axios

Vamos a ver los aspectos básicos de uso con un sencillo ejemplo. Primero, vamos a ver cómo se realizaría una petición POST a la URL http://tudireccion.com. Las funciones ‘OkCallback’ y ‘ErrorCallback’ serian las funciones de nuestro código para gestionar el resultado de la petición.

Sin Axios

let http = new XMLHttpRequest();
http.open("POST", 'http://tudireccion.com', true);
http.setRequestHeader('Content-type', 'text/html; charset=UTF-8');
http.onreadystatechange = function() {
    if (http.readyState == 4) {
        if (http.status == 200)
            OkCallback(JSON.parse(http.responseText));
        else
            ErrorCallback(http);
    }
};
http.onerror = OkCallback;
http.send(text);

Usando Axios, este mismo ejemplo quedaría de la siguiente forma.

Con Axios

axios({
    url: 'http://tudireccion.com',
    method: 'post',
    headers: {'Content-type': 'text/html; charset=UTF-8'},
    data: text
}).then(OkCallback, ErrorCallback)

Consumir un API Rest con Axios

Vamos a ver cómo usar Axios para acceder a un API Rest de forma sencilla. Emplearemos nuestro API Rest de ejemplo en Node y Express, que configuramos en esta entrada.

Vamos a crear una sencilla página muy con unos simples botones para mostrar el uso de Axios.

axios-pagina-web

Para ello creamos un fichero llamado ‘index.html’ con el siguiente contenido.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Axios consuming API REST Demo</title>
    </head>
    <body>
        <div>
            <div>
                <button onclick="getAllRequest()">Get All</button>
                <button onclick="getFilteredRequest()">Get Filtered</button>
                <button onclick="getByIdRequest()">Get by Id</button>
            </div>
            <div>
                <button onclick="postRequest()">Create</button>
            </div>
            <div>
                <button onclick="patchRequest()">Update</button>
            </div>
            <div>
                <button onclick="putRequest()">Replace</button>
            </div>
            <div>
                <button onclick="deleteRequest()">Delete</button>
            </div>
        </div>
        
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script src="main.js"></script>
    </body>
</html>

Por otro lado, creamos un fichero llamado ‘main.js’, con el siguiente contenido, que usa Axios para definir funciones que llaman a cada una de las acciones del API Rest de ejemplo.

function getAllRequest()
{
  axios.get('http://localhost:8080/item')
    .then(function (response) {
    console.log(response);
    })
    .catch(function (error) {
    console.log(error);
    })
    .then(function () {
    });
}

function getFilteredRequest()
{
  axios.get('http://localhost:8080/item', {
    params: {
      filter : 'myFilter'
    }
    })
    .then(function (response) {
    console.log(response);
    })
    .catch(function (error) {
    console.log(error);
    })
    .then(function () {
    });
}

function getByIdRequest()
{
  id = 10;
  axios.get('http://localhost:8080/item/' + id)
    .then(function (response) {
    console.log(response);
    })
    .catch(function (error) {
    console.log(error);
    })
    .then(function () {
    });
}

function postRequest()
{
  axios.post('http://localhost:8080/item', {
    data: 'NewItem'
    })
    .then(function (response) {
    console.log(response);
    })
    .catch(function (error) {
    console.log(error);
    })
    .then(function () {
    });
}

function putRequest()
{
  id = 10;
  axios.put('http://localhost:8080/item/' + id, {
    data: 'NewItem'
    })
    .then(function (response) {
    console.log(response);
    })
    .catch(function (error) {
    console.log(error);
    })
    .then(function () {
    });
}

function patchRequest()
{
  id = 10;
  axios.patch('http://localhost:8080/item/' + id, {
    data: 'NewItem'
    })
    .then(function (response) {
    console.log(response);
    })
    .catch(function (error) {
    console.log(error);
    })
    .then(function () {
    });
}

function deleteRequest()
{
  id = 10;
  axios.delete('http://localhost:8080/item/' + id)
    .then(function (response) {
    console.log(response);
    })
    .catch(function (error) {
    console.log(error);
    })
    .then(function () {
    });
}

Ahora, si pulsamos en cada uno de los botones, podemos comprobar en la consola del navegador que las acciones son llamadas correctamente.

axios-cliente

Por otro lado, en la consola de NodeJs comprobamos que, efectivamente, las acciones están siendo invocadas.

axios-nodejs

Hasta aquí este sencillo ejemplo sobre cómo consumir un API Rest gracias a Axios, una librería muy interesante que deberíais incorporar a vuestra librería herramientas.

Descarga el código

Todo el código de esta entrada está disponible para su descarga en Github [ github-full ]((https://github.com/luisllamasbinaburo/Axios-consuming-API-REST)