Ionic4—Interceptor拦截器进行错误处理

目录

一、概述

二、详解

一、概述

Ionic4与服务器进行数据交换时，分散处理API太麻烦，所以一般使用拦截器集中处理。

二、详解

第一步：创建拦截器服务

> ionic g service interceptor/timeout-interceptor

 第二步：定义拦截器

import { Inject, Injectable, InjectionToken } from '@angular/core';
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Observable, from, TimeoutError } from 'rxjs';
import { timeout, tap } from 'rxjs/operators';
import { HttpErrorResponse } from '@angular/common/http';
@Injectable({providedIn: 'root'
})
export class TimeoutInterceptorService implements HttpInterceptor{constructor() {}/*** 拦截器拦截请求* @param req * @param next */intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {// 请求前置处理return next.handle(req).pipe(tap( // 请求后置处理event => {}, // 异常处理error => {if (error instanceof TimeoutError) {console.log('服务器连接超时');} else if (error instanceof HttpErrorResponse) {console.log('网络连接异常');} else {console.log('未知原因，请求失败');}}));}
}

第三步：app.module.ts中配置拦截器

import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { TimeoutInterceptorService, DEFAULT_TIMEOUT } from './interceptor/timeout-interceptor.service';
...
imports: [ HttpClientModule ],
providers: [...[{ provide: HTTP_INTERCEPTORS, useClass: TimeoutInterceptor, multi: true }]...
]

第四步：请求数据

import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
import { TimeoutError } from 'rxjs';...constructor(public http: HttpClient){ }doUrl() {var api = '';this.http.get(api).subscribe((response) => {console.log('请求成功');});
}