Historial de página

Para hacer las llamadas al backend utilizaremos el paquete Axios. En

...

el Portal de Servicios tenemos el archivo api.js, que define apiRequest, que será lo que utilicemos para hacer nuestras llamadas, definido así:

const apiRequest = ({
  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 ejemplo:

import { apiRequest } from '@/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 = `${endpoints.search}${text}`;
    return apiRequest({ url });
  },
  select: (type, id)

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:

...

 => {
    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