Crear APIs REST con Python y Hug

Hug framework

Hola a todos, han sido unas semanas muy divertidas, en las cuales he ido aprendiendo a ser padre, por lo que deje un poco olvidado el blog; pero creí conveniente dedicarle un tiempo. En esta entrada, vamos a aprender a crear APIs REST con Python y Hug, un framework que llevo un tiempo utilizando en mis proyectos, y que me ha dejado un buen sabor de boca, debido a su rendimiento y facilidad para obtener productos finales.

Continuar leyendo

Primeros pasos con Axios

Consumiendo Servicios Web / REST APIs en Vuejs con Axios

Hola a todos, esta entrada es para actualizar lo visto en Realizando peticiones a un API con Vue. En esta ocasión tendremos nuestros primeros pasos con Axios, ya que como el mismo Evan You (creador de Vuejs) nos adelantaba, será retirado de los proyectos oficiales y se invita a utilizar librerías como Bluebird o Axios.

¿Qué es Axios?

Axios es un cliente HTTP basado en Promesas para Javascript, el cual puede ser utilizado tanto en tu aplicación Front-end, como en el Back-end con Nodejs. Utilizando Axios, es muy sencillo enviar peticiones a endpoints REST y realizar operaciones CRUD. Además, Axios puede ser utilizada desde una aplicación desarrollada con Javascript plano, al igual que utilizando un Framework como Vuejs. Para visualizar una lista completa con las caracteristicas de Axios, pueden visitar su página en Github, aunque aquí les menciono las que en mi opinión son las más importantes.

  • Realizar peticiones XMLHttpRequest (Ajax) desde el navegador de una manera sencilla.
  • Realizar peticiones HTTP desde Nodejs.
  • Soporta el API de Promesas.
  • Intercepta peticiones y respuestas.
  • Transforma la información de las peticiones y respuestas.
  • Cancela peticiones.
  • Transforma automáticamente la información en formato JSON.
  • Soporta protección del lado del cliente contra ataques CSRF (Cross-site request forgery).

En las próximas líneas, mi objetivo será que aprendas a instalar y añadir Axios a tu proyecto.

¿Qué vamos a realizar?

Para mostrar de forma más clara el tutorial, realizaremos una sencilla pero útil para el aprendizaje lista de posts. Pueden ver el acabado final en la siguiente imágen:

primeros pasos con axios - ejemplo

Primeros pasos con Axios…

Para añadir Axios, existen dos maneras:

Opción 1: Instalando Axios con Node Package Manager.

Para esto, sólo necesitas ejecutar uno de los siguientes comandos:


# Con npm

$ npm install -S axios

# Con yarn

$ yarn add axios

 

 

Con esto instalamos la librería dentro del directorio node_modules de nuestro proyecto.

Opción 2: Utilizando un CDN

La manera más sencilla de incluir axios es utilizando un Content Delivery Network, por ejemplo, incluyendo la siguiente etiqueta script en tu archivo index.html:


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

 

 

Como lo que buscamos es probar la funcionalidad de Axios para el envío y recepción de información desde servicios web/ REST, necesitamos tener un backend, como esto está fuera del alcance de este tutorial, vamos a utilizar la instancia para pruebas del servidor JSON que se encuentra en http://jsonplaceholder.typicode.com/ la cual ofrece varios endpoints para pruebas.

Especificamente, haremos uso del endpoint http://jsonplaceholder.typicode.com/posts.

Implementación de la UI

Para esta entrada utilizaremos el siguiente código HTML:


<!DOCTYPE html>
<html lang="en">
<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>Getting started with Axios</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/lumen/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Getting started with Axios and Vanilla javascript</h1>
<h4>This application uses Axios.</h4>
</div>
<h2>Axios Demo by <small>LaEsporaDelHongo.com</small></h2>
<div class="panel panel-primary">
<div class="panel-heading">GET Request</div>
<div class="panel-body">
<button class="btn btn-primary" onclick="getRequest()">Get Posts</button>
<button class="btn btn-warning" onclick="cleanResult(this)">Clear</button>
<div class="panel-body" id="getResult"></div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">GET Request with Parameters</div>
<div class="panel-body">
<input type="text" class="form-control" id="postId" placeholder="Post ID..." /><br>
<button class="btn btn-primary" onclick="getRequestWithParams()">Get Post</button>
<button class="btn btn-warning" onclick="cleanResult(this)">Clear</button>
<div class="panel-body" id="getResultWithParams"></div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">POST Request</div>
<div class="panel-body">
<form class="form-inline" id="postInputForm">
<div class="form-group">
<input type="text" class="form-control" id="postTitle" placeholder="Post Title..." />
</div>
<button type="submit" class="btn btn-primary">Send</button>
</form><br>
<button class="btn btn-warning" onclick="cleanResult(this)">Clear</button>
<div class="panel-body" id="postResult"></div>
</div>
</div>
<div class="fotter">
<p>&copy; <a href="http://laesporadelhongo.com" target="_blank">LaEsporaDelHongo.com</a></p>
</div>
</div>
<!-- Axios Library -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="main.js"></script>
</body>
</html>

 

Se puede apreciar que utilizamos un tema de bootstrap, y añadimos las secciones de nuestra aplicación. También hacemos referencia al script de Axios y añadimos un archivo main.js donde se encuentran los métodos que vamos a utilizar.

Cada sección de la aplicación se encuentra definida entre los bloques de código:


<div class="panel panel-primary">...</div>

 

Cada sección contiene el código necesario para uno de los casos de uso de Axios que veremos a continuación, y que nos permitirá generar código utilizando la respuesta devuelta por el API. El código HTML de cada sección respectivamente:


<div class="panel-body" id="getResult"></div>

<div class="panel-body" id="getResultWithParams"></div>

<div class="panel-body" id="postResult"></div>

 

Donde la unica diferencia se encuentra en el atributo id de cada bloque.

El código JS que contiene el archivo main.js es el siguiente:


function generateSuccessHTMLOutput(response) {
return  '<h4>Result</h4>' +
'<h5>Status:</h5> ' +
'<pre>' + response.status + ' ' + response.statusText + '</pre>' +
'<h5>Headers:</h5>' +
'<pre>' + JSON.stringify(response.headers, null, '\t') + '</pre>' +
'<h5>Data:</h5>' +
'<pre>' + JSON.stringify(response.data, null, '\t') + '</pre>';
}

function generateErrorHTMLOutput(error) {
return  '<h4>Result</h4>' +
'<h5>Message:</h5> ' +
'<pre>' + error.message + '</pre>' +
'<h5>Status:</h5> ' +
'<pre>' + error.response.status + ' ' + error.response.statusText + '</pre>' +
'<h5>Headers:</h5>' +
'<pre>' + JSON.stringify(error.response.headers, null, '\t') + '</pre>' +
'<h5>Data:</h5>' +
'<pre>' + JSON.stringify(error.response.data, null, '\t') + '</pre>';
}

function cleanResult(e) {
// e.nextElementSibling it's the result container
e.nextElementSibling.innerHTML = '';
}

function getRequest() {
var resultEl = document.getElementById("getResult");
resultEl.innerHTML = "";
// We use Axios to perform a GET request
axios.get('http://jsonplaceholder.typicode.com/posts')
.then(function(response) {
console.log(response);
resultEl.innerHTML = generateSuccessHTMLOutput(response);
})
.catch(function(error) {
resultEl.innerHTML = generateErrorHTMLOutput(error);
})
}

function getRequestWithParams() {
var resulEl = document.getElementById('getResultWithParams');
var postId = document.getElementById('postId').value;
resulEl.innerHTML = '';
// We use Axios to perform a GET request with params
axios.get('http://jsonplaceholder.typicode.com/posts', {
params: {
id: postId
}
})
.then(function(response) {
console.log(response);
resulEl.innerHTML = generateSuccessHTMLOutput(response);
})
.catch(function(error) {
resulEl.innerHTML = generateErrorHTMLOutput(error);
});
document.getElementById('postId').value = '';
}

function getPostRequest(e) {
e.preventDefault();
var resultEl = document.getElementById('postResult');
var postTitle = document.getElementById('postTitle').value;
resultEl.innerHTML = "";
// We use Axios to perform a POST request.
axios.post('http://jsonplaceholder.typicode.com/posts', {
userId: '1',
title: postTitle,
completed: true
})
.then(function(response) {
console.log(response);
resultEl.innerHTML = generateSuccessHTMLOutput(response);
})
.catch(function(error) {
resultEl.innerHTML = generateErrorHTMLOutput(error);
});
document.getElementById('postTitle').value = '';
}
document.getElementById('postInputForm').addEventListener('submit', getPostRequest);

 

De este archivo, podemos observar que contamos con un par de funciones para generar código HTML, el cual será insertado en cada bloque mencionado anteriormente. También tenemos una función con la cual se limpian los elementos input, y las funciones con las cuales llevaremos acabo las peticiones al API.

Estas funciones cuentan con un sencillo código javascript, donde sólo cabe mencionar la sección de Axios:


# Get request

axios.get(url)

# Get request with params

axios.get(url, params)

# Post request

axios.post(url, params)

 

Axios en cada petición nos devuelve una promesa, la cual debemos manipular haciendo uso de los métodos .then/.catch para capturar la respuesta y los errores respectivamente.

Nota final con respecto a Vuejs

Para utilizar Axios con vuejs contamos con dos maneras de llevar acabo esto:


# Utilizando Axios de forma normal

import axios from 'axios'

axios.get(url)

# Utilizando Axios como si de Vue-resource se tratara.

import axios from 'axios'

Vue.prototype.$http = axios

this.$http.get(url)

Y bien, es todo por esta ocasión, pueden encontrar un ejemplo utilizando Vuejs y otro ejemplo con Vanilla js (el utilizado en esta entrada) en el siguiente repositorio. Cualquier duda o comentario no duden en escribirlo en la sección de abajo, o en Twitter. Si gustas apoyarme a seguir escribiendo como hasta ahora, comparte el blog con tus amigos, conocidos, colegas, en tus redes, donde gustes. O bien siguiendome en Twitter y dando like a la fan-page de Facebook. Hasta la próxima.