Historial de página

...

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. Como cuando despleguemos nuestra aplicación tanto backend como frontend estarán bajo la misma ruta base, podemos indicar que si no tenemos parametrizado un endpoint local, se coja la ruta baseel Portal de Servicios tenemos el archivo api.js, que define apiRequest, que será lo que utilicemos para hacer nuestras llamadas, definido así:

const ENDPOINT_ROUTEapiRequest = '/rest/v1.0/private';
export const ENDPOINT = (typeof(process.env.VUE_APP_BACKEND) != "undefined" ? process.env.VUE_APP_BACKEND : window.location.origin) + ENDPOINT_ROUTE;

Para el endpoint local, podemos ver cómo parametrizarlo en la wiki de Parametrización en Vue.

Una vez hecho esto, podemos definirnos nuestras llamadas a un servicio REST en otro archivo .js, de esta forma:

import axios from "axios";
import { ENDPOINT } from "./endpoints";
 
export default ServicioExpedientes {
  getExpediente(dni) { 
    return axios.get("/expediente?dni=" + dni);
  },
  getOtrasCosas() {
    return axios.get("/otrascosas");
  }
}

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 solicitados.

Para utilizarlo en nuestros componentes, sólo tendremos que importarlo para poder hacer las llamadas:

({
  method = 'GET',
  data = {},
  url,
  root = false,
  responseType = 'json',
}) => axios({
  url: `${root ? '' : environmentURL || ''}${url}`,
  method,
  data,
  responseType,
}).catch(
  (error) => {
    throw error;
  },
);

Como vemos, por defecto hace un GET, y se espera un json como respuesta.

Para definir nuestras llamadas a las apis, nos crearemos un único archivo en cada servicio, llamado servicio.api.js, siendo servicio algo indicativo de nuestro servicio. Por ejemploPosteriormente, 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:

import { apiRequest ServicioRest} from "@/services/ServicioRest.js";

export default {
  ...
  methods: {
    método() '@/api';

const moduleBaseApiURL = '/historico/guiadocente/api/';
const apiVersion = 'v1';

const endpoints = {
  pdf: `${moduleBaseApiURL}public/2/getpdf/`,
  search: `${moduleBaseApiURL}public/${apiVersion}/search/`,
  select: `${moduleBaseApiURL}public/${apiVersion}/select/`,
};

const syllabusApi = {
  endpoints: () => endpoints,
  searchSyllabus: (text) => {
    const url ServicioRest.getExpediente(this.dni).then((response= `${endpoints.search}${text}`;
    return apiRequest({ url });
  },
  select: (type, id) => {
		...
    const url = })`${endpoints.select}${type}/${id}`;
    return apiRequest({ url });
  },
}

...

;

export default syllabusApi;

Debemos seguir siempre esta estructura:

• Importar apiRequest.
• moduleBaseApiURL: ruta base del backend.
• apiVersion: versión de la api.
• endpints: objeto con todos los endpoints que se utilizarán, construyéndolos como vemos en el ejemplo.
• xxxapi: cada una de las llamadas, incluyendo endpoints al principio.
• export default xxxapi