ionic3 封装http请求、创建provider

在src文件下新建tool目录，新建httpService（自己命名）文件，在httpServeice下新建httpInterceptorService.ts

import {Injectable} from "@angular/core";
import {HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse} from "@angular/common/http";
import {Observable} from "rxjs/Observable";
import {mergeMap, catchError, tap, finalize} from 'rxjs/operators';
import {Loading, LoadingController} from 'ionic-angular';
import {ErrorObservable} from 'rxjs/observable/ErrorObservable';

@Injectable()
export class HttpInterceptorService implements HttpInterceptor {
  private loading: Loading;
  status = {
    '0': '网络出了点小差哟，请稍后再试',
    '400': '错误的请求。由于语法错误，该请求无法完成。',
    '401': '未经授权。服务器拒绝响应。',
    '403': '已禁止。服务器拒绝响应。',
    '404': '未找到。无法找到请求的位置。',
    '405': '方法不被允许。使用该位置不支持的请求方法进行了请求。',
    '406': '不可接受。服务器只生成客户端不接受的响应。',
    '407': '需要代理身份验证。客户端必须先使用代理对自身进行身份验证。',
    '408': '请求超时。等待请求的服务器超时。',
    '409': '冲突。由于请求中的冲突，无法完成该请求。',
    '410': '过期。请求页不再可用。',
    '411': '长度必需。未定义“内容长度”。',
    '412': '前提条件不满足。请求中给定的前提条件由服务器评估为 false。',
    '413': '请求实体太大。服务器不会接受请求，因为请求实体太大。',
    '414': '请求 URI 太长。服务器不会接受该请求，因为 URL 太长。',
    '415': '不支持的媒体类型。服务器不会接受该请求，因为媒体类型不受支持。',
    '416': 'HTTP 状态代码 {0}',
    '500': '网络出了点小差哟，请稍后再试。',//内部服务器错误
    '501': '未实现。服务器不识别该请求方法，或者服务器没有能力完成请求。',
    '503': '服务不可用。服务器当前不可用(过载或故障)。'
  };

  constructor(private loadingCtrl: LoadingController) {
  }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const reqs = req.clone({
      // headers: req.headers.set('token',this.token)
    });
    // this.showLoading();
    return next.handle(reqs).pipe(
      tap(event => {
          if (event instanceof HttpResponse) {
          }
        }
      ),
      finalize(() => {
        // this.hideLoading();
      }),
      mergeMap((event: any) => {
        if (event instanceof HttpResponse && event.status != 200) {
          return ErrorObservable.create(event);
        }
        return Observable.create(observer => {
          observer.next(event)
        }); //请求成功返回响应
      }),
      catchError((res: HttpResponse<any>) => {  //请求失败处理
          if (res.status < 200 || res.status >= 300) {
            let msg = this.status[res.status];
            alert(msg)
          }
          return ErrorObservable.create(event);
        }
      )
    )
  }
  showLoading(content = ''): void {
    if (!this.loading) {// 如果loading已经存在则不再打开
      const loading = this.loadingCtrl.create({
      })
      loading.present();
      this.loading = loading;
    }
  }
  hideLoading(): void {
    this.loading && this.loading.dismiss();
    this.loading = null;
  }
}

在app.module.ts中引入HttpInterceptorService

创建provider封装http请求

ionic g provider my-http 会自动创建了一个名为my-http的服务在src/providers里

//my-http.ts
import { HttpClient, HttpParams ,HttpHeaders} from '@angular/common/http';
import { Injectable } from '@angular/core';
import { isObject } from "rxjs/util/isObject";
import { HOST_URL,ACCESS_TOKEN} from '../../domain/main';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
import {Loading, LoadingController} from "ionic-angular";
@Injectable()
export class MyHttpProvider {
  private loading: Loading;
  constructor(public http: HttpClient,
  private loadingCtrl: LoadingController) {
    
  }
  //带有token的get请求
  get(url: string, params: any, isShowLoading?:boolean, callback?: (res: any, error: any) => void): void {
    if (isShowLoading != null){
      if (isShowLoading){
        this.showLoading()
      }
    }
    let fullUrl = `${HOST_URL}${url}/${localStorage.getItem(ACCESS_TOKEN)}`;
    let headers = new HttpHeaders();
    // headers.append('Content-Type', 'application/json;utf-8');
    headers.append('token', localStorage.getItem(ACCESS_TOKEN));
    this.http.get(fullUrl, {params: this.encodeComplexHttpParams(params),
    headers:headers})
      .subscribe(res => {
        this.hideLoading()
        callback && callback(res, null);
      }, error => {
        this.hideLoading()
        callback && callback(null, error);
      });
  }
  //带有token的post请求
  post(url: string, params: any,isShowLoading?:boolean, callback?: (res: any, error: any) => void): void {
    if (isShowLoading != null){
      if (isShowLoading){
        this.showLoading()
      }
    }
    let fullUrl = `${HOST_URL}${url}/${localStorage.getItem(ACCESS_TOKEN)}`;
    let headers = new HttpHeaders();
    // headers.append('Content-Type', 'application/json;utf-8');
    headers.append('token', localStorage.getItem(ACCESS_TOKEN));
    console.log(localStorage.getItem(ACCESS_TOKEN))
    this.http.post(fullUrl, this.encodeComplexHttpParams(params),{
      headers:headers
    })
      .subscribe(res => {
          this.hideLoading()
          callback && callback(res, null);
      },
        error => {
          this.hideLoading()
          callback && callback(null, error);
        });
  }
//不带有token的get请求
  directGet(url: string, params: any,isShowLoading?:boolean, callback?: (res: any, error: any) => void): void {
    if (isShowLoading != null){
      if (isShowLoading){
        this.showLoading()
      }
    }
    let fullUrl = HOST_URL + url;
    this.http.get(fullUrl, { params: this.encodeComplexHttpParams(params) })
      .subscribe(res => {
        this.hideLoading()
        callback && callback(res, null);
      }, error => {
        this.hideLoading()
        callback && callback(null, error);
      });
  }
  //不带token的post请求
  directPost(url: string, params: any, isShowLoading?:boolean,callback?: (res: any, error: any) => void): void {
    if (isShowLoading != null){
      if (isShowLoading){
        this.showLoading()
      }
    }
    let fullUrl = HOST_URL + url;
    this.http.post(fullUrl, this.encodeComplexHttpParams(params))
      .subscribe(res => {
        this.hideLoading()
          callback && callback(res, null);
        },
        error => {
          this.hideLoading()
          callback && callback(null, error);
        });
  }
  private paramsString(params: any): string {
    if (!params) return null; let str = "";
    for (let key in params) {
      if (params.hasOwnProperty(key)) {
        let value = params[key];
        if (value === null) continue;
        if (Array.isArray(value)) {
          if (value.length === 0) continue;
          for (let index = 0; index < value.length; index++) {
            let k = key + "[" + index + "]"; let v = value[index];
            if (str.length > 1) str += "&"; str += k + "=" + v;
          }
        } else if (isObject(value)) {
          for (let subKey in value) {
            if (value.hasOwnProperty(subKey)) {
              let v = value[subKey];
              if (v === null) continue; let k = key + "[" + subKey + "]";
              if (str.length > 1) str += "&"; str += k + "=" + v;
            }
          }
        }
        else { if (str.length > 1) str += "&"; str += key + "=" + value; }
      }
    }
    return str;
  }
  private encodeComplexHttpParams(params: any): any {
    if (!params) return null;
    return new HttpParams({ fromString: this.paramsString(params) });
  }
  showLoading(content = ''): void {
    if (!this.loading) {
      const loading = this.loadingCtrl.create({
      })
      loading.present();
      this.loading = loading;
    }
  }
  hideLoading(): void {
    this.loading && this.loading.dismiss();
    this.loading = null;
  }
}

其中HOST_URL是domain目录下main.ts设置的后台api地址，ACCESS_TOKEN是登陆后的token。

使用前在app.modult.ts中引入MyHttpProvider

//app.module.ts
…………
import { MyHttpProvider} from '../providers/my-http/my-http';
…………
@NgModule({
  declarations: [
    MyApp,
    TabsPage,
  ],
  imports: [
    …………
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    TabsPage,
  ],
  providers: [
    …………
    MyHttpProvider
    …………
  ]
})
export class AppModule {
}