Para hacer las llamadas al backend utilizaremos el paquete Axios. En nuestro proyecto tendremos una carpeta services con los archivos Javascript que contengan los servicios. Un ejemplo podría ser el siguiente. Nos definimos un archivo endpoints.js para tener las URLs a las que se llamarán:
export const ENDPOINT = 'https://enpointrest.um.es/consultaexpedientes/rest/v1.0/private'; |
Y el archivo de nuestro servicio, por ejemplo ServicioExpedientes.js:
import axios from "axios";
import { ENDPOINT } from "./endpoints";
export default class ServicioExpedientes {
getExpediente(dni) {
return axios.get("/expediente?dni=" + dni);
}
} |
El objeto que se obtiene como respuesta tiene los siguientes campos:
Con esto podemos comprobar que la la petición y la respuesta han sido correctas, y obtener los datos solicitados.
Posteriormente, en nuestros componentes, tendremos que definirnos nuestro servicio e inicializarlo. Al hacer las peticiones, debemos tener en cuenta que las peticiones se realizan de forma asíncrona, es decir, se lanzará la petición y seguirá ejecutando el código aunque no se haya recibido la respuesta. El código que deseamos que se ejecute como reacción a la respuesta tendrá que ir en .then(...), de la siguiente manera:
...
export default {
data() {
...
},
servicioExpedientes: null,
created() {
this.servicioExpedientes = new ServicioExpedientes();
},
methods: {
método() {
this.servicioExpedientes(this.dni).then((response) => {
if(response.status == 200) {
this.docUniversitarrio = response.data;
}
})
}
}
} |
El objeto que obtenemos al hacer las llamadas a la API es de tipo Promise. Podemos consultar esta página para entender cómo funciona este tipo de dato, y las opciones que tenemos para gestionar la respuesta obtenida.