Ionic4・インターセプターインターセプターエラー処理

ディレクトリ

I.概要

第二に、詳細

---

I.概要

Ionic4サーバとのデータ交換は、APIあまりにも多くの問題を処理して分散するとき、それは一般的に迎撃を使用して処理を集中しています。

第二に、詳細

ステップ1：インターセプターサービスを作成します。

> ionic g service interceptor/timeout-interceptor

 ステップ2：インターセプタを定義します。

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 }]
    ...
]

ステップ4：要求データ

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('请求成功');
    });
}