Después de la primera y la segunda parte, ahora nos toca esta tercera en la que crearemos un servicio para que nuestra app puede obtener datos de manera sencilla.
Lo primero es declarar el servicio y nuestra clase Query del capítulo anterior en el fichero app/app.module.ts.
Primero importamos los módulos:
import { ApiService } from '../services/api.service';
import { Query } from '../services/query';
Y después los añadimos dentro del array de providers del @NgModule:
providers: [
StatusBar,
SplashScreen,
Query, // <--
ApiService, // <--
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
Una vez hecho esto vamos a crear el archivo services/api.service.ts donde lo primero que haremos será importar nuestra clase Query y por otro lado importar la clase Injectable para que podamos usar este servicio en otras partes de la app.
import { Injectable } from '@angular/core';
import { Query } from './query';
A continuación defino la función que hará uso de la clase Query y un mapper para mis datos:
const doQuery = (query, params, mapper) => {
return query.post('https://miapi.com/v1/', params, mapper);
};
const mapper = data => {
data.var3 = data.var1 + data.var2;
};
Si no queremos procesar los datos que recibimos y nos sirven tan cual llegan la función de mapper quedaría de la siguiente forma:
const mapper = data => data;
Y por último defino la clase del servicio en sí.
@Injectable()
export class ApiService {
constructor(private query: Query) {
this.query = query;
}
metodo1() {
return doQuery(this.query, {}, mapper);
}
metodo2({param1, param2}) {
return doQuery(this.query, {param1, param2}, mapper);
}
}
En lo que hay que fijarse en esta clase es la llamada al constructor, la cual recibe como parámetro query que es de tipo Query y que ésta se asigna al objeto this, que es la clase en sí para poder usarla luego dentro de los distintos métodos.
Aquí tenéis el código completo del servicio:
import { Injectable } from '@angular/core';
import { Query } from './query';
const doQuery = (query, params, mapper) => {
return query.post('https://miapi.com/v1/', params, mapper);
};
const mapper = data => {
data.var3 = data.var1 + data.var2;
};
@Injectable()
export class ApiService {
constructor(private query: Query) {
this.query = query;
}
metodo1() {
return doQuery(this.query, {}, mapper);
}
metodo2({param1, param2}) {
return doQuery(this.query, {param1, param2}, mapper);
}
}
En la próxima parte veremos cómo crear una página, utilizar el servicio y mostrar los datos recibidos.