Historial de página

Para hacer las llamadas al backend utilizaremos el paquete Axios. En nuestro proyecto tendremos una carpetaservicescarpeta services con los archivos Javascript que contengan los servicios. Un ejemplo podría ser el siguiente. Nos definimos un archivoarchivo endpoints.jsjs para tener las urls 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 ejemploejemplo ServicioExpedientes.js:

import axios from "axios";
import { ENDPOINT } from "./endpoints";
 
export default class ServicioExpedientes {
  getExpediente(dni, codTitulo, codPlan, codGM, codCentro, codDoc, bienioDoc) { 
    ifreturn (!dni) return null;
 
    var url = ENDPOINT + axios.get("/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);
  }
}}
}

El objeto que se obtiene como respuesta tiene los siguientes campos:

• config: contiene la configuración que ha utilizado axios para realizar la llamada.
• data: los datos que se reciben como respuesta. En el caso del ejemplo sería el expediente.
• headers: headers que contiene la respuesta.
• request: es la petición que ha generado la respuesta.
• status: código HTTP de la respuesta del servidor.
• statusText: mensaje de estado de la respuesta del servidor.

Con esto podemos comprobar que la la petición y la respuesta han sido correctas, y obtener los datos solicitadosLa 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 , e inicializarlo, y hacer las llamadas de esta forma. 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.titulacionSeleccionada.sivaId,
        this.titulacionSeleccionada.codTitu,
        this.titulacionSeleccionada.codPlan,
        this.titulacionSeleccionada.tipoTitulacion,
        this.titulacionSeleccionada.cedCodigo,
        this.titulacionSeleccionada.programa,
        this.titulacionSeleccionada.bienio
      this.dni).then((response) => {
		if(response.status == 200) {
        	this.docUniversitarrio = response.data;
		}
      })
    }
  }
}