angularjs ajax拦截器,ionic4 angular 数据请求方式httpServices 拦截器

1.这里提供统一拦截后端接口数据处理，api统一文件管理方式：

统一拦截如下

// 目录src/service/request.service.ts

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

import { HttpClient, HttpHeaders, HttpResponse, HttpErrorResponse } from '@angular/common/http';

import { LoadingController, AlertController } from '@ionic/angular';

import { Observable  } from 'rxjs';

import { finalize, tap } from 'rxjs/operators';

@Injectable({

providedIn: 'root'

})

export class RequestService {

constructor(private httpClient: HttpClient, private loading: LoadingController,public alertController: AlertController) { }

headerOptions = {

headers: new HttpHeaders({

'Content-Type':  'application/json',

'Authorization': 'my-auth-token'

}),

}

public request (method:string,url:string,data: Object):Observable> {

this.loadShow()

return this.httpClient.request(method,url,{ ...data, ...this.headerOptions, ...{observe: 'response'}}).pipe(

tap((response) => {

this.handleSuccess(response)

},

(error) => {

this.handleError(error)

}),

finalize(() => {

this.loadHide()

})

)

}

private handleSuccess(response) {

}

private handleError(error: HttpErrorResponse) {

if (error.error instanceof ErrorEvent) {

} else {

if (error.status === 400) {

this.alert('请求失败')

} else if (error.status === 404) {

this.alert('参数有误，请检查')

} else if (error.status === 500) {

this.alert('接口有错，联系后台管理员')

} else {

this.alert(error.message)

}

}

}

private async alert(message) {

const alert = await this.alertController.create({

header: '提示',

message,

buttons: \['确认'\]

});

await alert.present();

}

private async loadShow() {

const loading = await this.loading.create({

message: '加载中...',

duration: 2000,

translucent: true,

cssClass: 'custom-class custom-loading'

});

await loading.present();

}

private async loadHide() {

await this.loading.dismiss()

}

}

2. 统一管理api

// 目录src/api/api.ts

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

import { RequestService } from 'src/service/request.service'

import { Observable  } from 'rxjs';

@Injectable({

providedIn: 'root'

})

export class test {

constructor(public requestService: RequestService){}

public login (data: any) {

return this.requestService.request(

'get',

'https://api.apiopen.top/getJoke',

{params: data}

)

}

}

3.调用

目录/src/pages/tab1/tab1-page.ts

import { Component } from '@angular/core';

import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';

import { HttpClient, HttpHeaders, HttpResponse } from '@angular/common/http';

import { Router } from '@angular/router';

import {HttpServiceService} from 'src/service/http-service.service'

import { test } from 'src/api/api'

import { Observable, from } from 'rxjs';

@Component({

selector: 'app-tab1',

templateUrl: 'tab1.page.html',

styleUrls: \['tab1.page.scss'\]

})

export class Tab1Page {

httpOptions = {

headers: new HttpHeaders({ 'Content-Type': 'application/json;application/x-www-form-urlencodeed; charset=utf-8', "Referer": "https://www.aganchina.cn" })

};

constructor(private test: test, private httpClient: HttpClient, private router: Router,private httpService: HttpServiceService) { }

goDetails() {

this.test.login({page:1,count:2,type: 'video'}).subscribe(res => {

console.log(res)

})

}

}