LuisLlamas Logo
ES
como-consumir-un-api-rest-con-la-libreria-de-javascript-axios

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

  • 3 min

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)

En esta página