Estás viendo una versión antigua de esta página. Ve a la versión actual.

Comparar con el actual Ver el historial de la página

« Anterior Versión 12 Siguiente »

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:

historico.api.js
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) => {
    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
  • Sin etiquetas