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.