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, codTitulo, codPlan, codGM, codCentro, codDoc, bienioDoc) { if (!dni) return null; var url = ENDPOINT + "/expediente?dni=" + dni; if (codTitulo) url += "&codTitulo=" + codTitulo; if (codPlan) url += "&codPlan=" + codPlan; if (codGM) url += "&codGM=" + codGM; if (codDoc) url += "&codDoc=" + codDoc; if (bienioDoc) url += "&bienioDoc=" + bienioDoc; return axios.get(url).then((response) => response.data); } }
La línea importante aquí es la última, en la que llamamos a la url y, una vez obtengamos la respuesta, devolvemos el contenido.
Posteriormente, en nuestros componentes, tendremos que definirnos nuestro servicio, inicializarlo, y hacer las llamadas de esta forma:
... export default { data() { ... }, servicioExpedientes: null, created() { this.servicioExpedientes = new ServicioExpedientes(); }, methods: { método() { this.servicioExpedientes( this.titulacionSeleccionada.sivaId, this.titulacionSeleccionada.codTitu, this.titulacionSeleccionada.codPlan, this.titulacionSeleccionada.tipoTitulacion, this.titulacionSeleccionada.cedCodigo, this.titulacionSeleccionada.programa, this.titulacionSeleccionada.bienio ).then((response) => { this.docUniversitarrio = response; }) } } }