| Info |
|---|
Para utilizar APIs desplegadas en local, disponemos de esta guía: Conexión a las APIs locales |
Para hacer las llamadas al backend utilizaremos el paquete Axios. En nuestro proyecto tendremos una carpetaservicescon los archivos Javascript que contengan los servicios. Un ejemplo podría ser el siguiente. Nos definimos un archivoendpoints.jspara tener las urls a las que se llamaránel Portal de Servicios tenemos el archivo api.js, que define apiRequest, que será lo que utilicemos para hacer nuestras llamadas, definido así:
| Bloque de código |
|---|
| language | js |
|---|
| title | apiRequest |
|---|
|
export const ENDPOINTapiRequest = 'https://enpointrest.um.es/consultaexpedientes/rest/v1.0/private'; |
Y el archivo de nuestro servicio, por ejemploServicioExpedientes.js:
| Bloque de código |
|---|
|
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.
({
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, inicializarlo, y hacer las llamadas de esta forma:
| Bloque de código |
|---|
| language | js |
|---|
| title | historico.api.js |
|---|
|
import..
export default {
apiRequest 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)} 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 = this.docUniversitarrio = response`${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