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 {
}

ionic3 封装http请求、创建provider相关推荐

uniapp 封装网络请求
文章目录一.前端 1. 封装网络请求 2. 封装模块请求方法二.后端 2.1. 返回对象 2.2. 热搜接口三.微信模拟请求 3.1. Network 3.2. Console 一.前端 1. ...
简单封装 HTTP 请求
2017-2-19 更新到第二版: 源码地址:http://git.oschina.net/sp42/ajaxjs/tree/master/ajaxjs-base/src/com/ajaxjs/net ...
小程序promise封装post请求_Promise封装微信小程序的Request请求
回调地狱一向是影响开发和维护的症结所在,无数个success()的嵌套再嵌套,导致代码层级颇深,盘一次逻辑都要费劲千辛万苦,ES6语法中的Promise,便是专为解决JS中异步请求回调的信任问题而存在 ...
afn访问本地html,Swift利用AFN实现封装网络请求详解
前言相信大家都知道,我们一般在一个项目中,网络请求都封装成一个单例,以确保整个项目的网络请求 Session 是同一个. 单例模式定义:一个类有且仅有一个实例,并且自行实例化向整个系统提供,下面话不 ...
xUtils3.x的网络请求封装和请求https之单向SSL验证
很久没写博客了, 自己定的路已经走歪,菜鸟的进阶之路上我只是走了一步,自从发了一篇博客之后在没有来过这里,已经有一年了吧,今天再次回到这里. 言归正传,今天要写的是xUtils3.x网络请求的封装和请 ...
微信小程序封装api请求步骤
小程序发起网络请求需用到 wx.request() 废话不多说直接开始封装 1.首先创建一个request文件夹里边创建一个api.js和request.js 2.封装的请求在request.js ...
Android中使用Kotlin协程代替RxJava封装网络请求
现在的Android项目普遍使用Retrofit+RxJava的组合实现网络接口请求与数据的展现.这一功能通过Kotlin语言的协程功能也可以很方便的实现. 相比较而言,RxJava功能过于强大,如果 ...
微信小程序，封装同步请求
封装统一请求的目的: 在请求时有时会返回不同的返回码进行不同的数据处理,比如:返回正常时,进行正常操作, 如果返回了异常,那么就需要进行不同的处理了,由于每次请求都可能出现各种返回码,所以进行请求封装 ...
HTML封装AJAX请求，在请求里面写登录的逻辑 ajax 网络请求 post
调用方法: 先引用config.js,然后调用封装网络请求. 里面三个参数 1.url, 2.请求需要提交的数据, 3.请求类型 // 获取二维码.背景图片接口 getScheduleInfo() ...

ionic3 封装http请求、创建provider

创建provider封装http请求

ionic3 封装http请求、创建provider相关推荐

最新文章

热门文章