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.