solicitud HTTP iónica

solicitud HTTP iónica

Iónica solicitudes HTTP que realmente me hace un poco cegado, porque con un token necesidades petición de verificación, pero tienen un primer contacto blanco, con iónica, no sabía cómo lograr, trate de escribir, lo que realmente fácil un poco de éxito, grabarlo.

Usar herramientas

En primer lugar, crear una carpeta de archivos al mismo nivel de los proveedores de aplicaciones, las solicitudes HTTP utilizado para almacenar herramientas.
Crear una carpeta en http carpeta de proveedores, http carpeta, crear un archivo http.ts.
Herramientas dice lo siguiente:

import { HttpClient, HttpResponse } from '@angular/common/http';
import { AppConfig } from './../../app/app.config';

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

/*
  Generated class for the HttpProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class HttpProvider {

  private baseServerUrl = 'http://localhost'  //这个地方是请求的baseUrl

  constructor(public httpClient: HttpClient) {
    //console.log('Hello HttpProvider Provider');
  }

  /**
   * post请求
   * @param url 相对路径
   * @param params 参数
   */
  public post(url, params:any):Observable<any> {
    //console.log("此时token：",AppConfig.token)
    return this.httpClient.post(this.baseServerUrl + url,params,{
      headers:{
        'Content-Type': 'application/json',
        'X-Access-Token': AppConfig.token,
        'Request-Origin': 'app'
      }
    })
  }

  /**
   * get方法
   * @param url 相对路径
   * @param params 参数
   */
  public get(url,params:any):Observable<any>{
    //console.log("此时token：",AppConfig.token)
    return this.httpClient.get(this.baseServerUrl + url,{
      headers:{
        'Content-Type': 'application/json',
        'X-Access-Token': '' + AppConfig.token,
        'Request-Origin': 'app'
      },
      params:params
    })
  }

}

Crear un archivo almacenado en señal de

Porque tenemos que ser autenticado, es decir, cuando las necesidades solicitud realizar símbolo, símbolo Así que he creado un archivo usado para almacenar la vuelta después de un inicio de sesión correcto.
App.config.ts crear un archivo en el directorio de aplicación, archivo de texto es el siguiente:

export class AppConfig{
  public static token:string = '';
}

Después de un inicio de sesión con éxito, el token en el valor en el interior, y luego volver la próxima acarreo símbolo símbolo solicitando datos sobre la toma de aquí.

Inyectar dependencias

Inyección en las diversas dependencias de archivos app.module.ts

import { HttpProvider } from '../providers/http/http';
import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';

inyección

  imports: [
    ···
    HttpClientModule,
  ],

inyección

providers: [
    ···
    HttpProvider,
  ],

uso

En la página requiere petición http, paquetes de importación

import {HttpProvider} from './../../providers/http/http';
import { AppConfig } from './../app.config';

En el constructor de la inyección de dependencia

constructor( private httpProvider: HttpProvider,) {}

peticiones HTTP GET

this.httpProvider.get('/getCheckCode',{}).subscribe((resp => {
    if (!resp.success) {
       return;
    }
    console.log("返回数据",resp);
    }), error => {
    console.error(error);
})

http solicitud POST

let pa= {
      'username': 'wjw',
      'password': 'wjw'
    }
console.log(pa)
this.httpProvider.post('/login',pa ).subscribe((resp: any) => {
    console.log('登录成功',resp);
    AppConfig.token = resp.result.token  // 登录成功的token存起来
    }, error => {
    console.log('登录失败');
})

En general es así.