Ionic4—Interceptor拦截器详解

一、概述

Ionic与服务器进行数据交换时，分散处理API太过繁琐，一般用拦截器来集中处理。拦截器主要有以下几种应用。

(1) 服务器地址注入
(2) 错误处理
(3) 超时处理
(4) 日志处理
(5) 无token时跳转至登录页面

二、详解

ValueProvider

配置token令牌。token值可能是Type、InjectionToken、OpaqueToken的实例或字符串。

实例1：token值为字符串

// app.module.ts
providers: [
    ...
    [{ 
        // 注入令牌
        provide: 'jpf', 
        // 设置token令牌绑定的依赖对象
        useValue: 30000
    }],
],

如下代码所示，使用@Inject获取token令牌的绑定信息，并注入到指定变量。

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

export class demo{
    constructor(@Inject('jpf') private jpfDemo){}
}

注意，在定义Provider时，使用字符串作为token名称，可能出现token命名冲突问题，例如设置的token名称与第三方脚本库中的信息重名，存在互相替换的风险。

实例2：token值为InjectionToken实例

import { DEFAULT_TIMEOUT } from 'interceptor.service';

providers: [
    ...
    [{ 
        // 注入令牌
        provide: DEFAULT_TIMEOUT, 
        // 设置token令牌绑定的依赖对象
        useValue: 30000
    }],
],

/**
 * interceptor.service
 */
import { Inject, InjectionToken } from '@angular/core';

export const DEFAULT_TIMEOUT = new InjectionToken<number>('defaultTimeout');

export class demo{
    constructor(@Inject(DEFAULT_TIMEOUT) private defaultTimeout){}
}

Inject装饰器

参数装饰器，用来在类的构造函数中描述非Type类型的参数对象。构造函数中非Type类型的参数对象只能用@Inject的方式注入，这是因为只有Type类型的对象，才能被TS编译器编译。

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

...

constructor(@Inject('jpf') protected jpfDemo) {}

如上代码所示，@Inject表示参数是通过注入的方式获取的。接收一个参数，表示要获取绑定信息的token名称。

Injectable装饰器

类装饰器，一般用在Angular的Service中，表示该服务实例可以被注入到其它服务、组件或其它实例里面。如果所创建的服务不需要注入到其它服务、组件或实例，可以不使用该装饰器。建议不管是否需要注入到其它对象，创建服务时都使用该装饰器。

@Injectable({
  providedIn: 'root'
})
export class TimeoutInterceptorService{
}

如上代码所示，表示这个类将被注入到根module中。

InjectionToken

创建可在ValueProvider中使用的token令牌。可以避免定义Provider时出现的token命名冲突问题。继承于OpaqueToken，同时支持泛型，用于描述依赖对象的类型。接收一个参数，该参数为描述性信息，可自定义。

/**
 * interceptor.service
 */
import { Inject, InjectionToken } from '@angular/core';

// 创建token令牌
export const DEFAULT_TIMEOUT = new InjectionToken<number>('defaultTimeout');

export class demo{
    constructor(@Inject(DEFAULT_TIMEOUT) private jpfDemo){}
}

/**
 * app.module.ts
 */
import { DEFAULT_TIMEOUT } from 'interceptor.service';

providers: [
    ...
    [{ 
        // 注入令牌
        provide: DEFAULT_TIMEOUT, 
        // 设置token令牌绑定的依赖对象
        useValue: 30000
    }],
],

HttpEvent、HttpHandler、HttpInterceptor、HttpRequest

HttpEvent是响应流中所有可能事件的联合类型，根据预期的响应类型输入。

HttpHandler是http请求的处理者。

HttpInterceptor表示http拦截器。

HttpRequest处理http请求。

空城里的往日时光

发布了223 篇原创文章 · 获赞 82 · 访问量 1万+

私信关注