Angular8 Http攔截器簡(jiǎn)單使用教程

發(fā)布時(shí)間：2020-10-21 22:00:00 來(lái)源：腳本之家閱讀：224 作者：何棄療欄目：web開(kāi)發(fā)

攔截器

Http攔截器就是攔截發(fā)出的請(qǐng)求，對(duì)其進(jìn)行統(tǒng)一添加額外處理，然后放行；對(duì)響應(yīng)進(jìn)行攔截并作出業(yè)務(wù)上的判斷，決定是否給與返回。

先看一組常見(jiàn)的業(yè)務(wù)請(qǐng)求：

this.http.post('http://127.0.0.1:8080/api/getList', {
   header: {
    token: 'asdasdas'
   },
   observe: 'body',
   params: {
    pageSize: 10,
    pageIndex: 1
   },
   responseType: 'json',
   withCredentials: true
  });

可以看出有些配置是幾乎所有請(qǐng)求都共通得，有的需要token等參數(shù)，一個(gè)項(xiàng)目全部手動(dòng)寫得話，第一容易漏寫，第二以后如果有改動(dòng)，需要所有接口都調(diào)整，不利于維護(hù)，最理想得狀態(tài)就是只修改參數(shù)和api地址，其他得交給特別得機(jī)制去處理，這就引出了今天的主角-HttpInterceptor

定義攔截器

按照官方約定，文件應(yīng)該是以‘.interceptor.ts'作為后綴

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpEvent, HttpHandler, HttpRequest, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
const ignoreToken = ['login', 'logout', 'table'];
@Injectable()
export class CommonInterceptor implements HttpInterceptor {
 intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  // 先補(bǔ)全請(qǐng)求協(xié)議
  let url = req.url;
  const needToken = ignoreToken.filter(u => url.match(u));
  if (url.indexOf('http://') < 0 || url.indexOf('https://') < 0) {
   url = 'http://' + url;
  }
  // 過(guò)濾掉不需要token的請(qǐng)求
  if (!needToken.length) {
   req = req.clone({
    url
   });
  } else {
   req = req.clone({
    url,
    headers: req.headers.set('token', 'asdqwe')
   });
  }
  return next.handle(req).pipe(
   tap(
    event => {
     if (event instanceof HttpResponse) {
      console.log(event);
      if (event.status >= 500) {
       // 跳轉(zhuǎn)錯(cuò)誤頁(yè)面
      }
     }
    },
    error => {
     // token過(guò)期 服務(wù)器錯(cuò)誤等處理
    })
  );
 }
}

組件：

getTemp() {
  this.http.post('172.16.10.161:3000/table', {
   params: {
    pageSize: 10,
    pageIndex: 1
   }
  }).subscribe(res => {
   console.log(res);
  });
 }

該攔截器實(shí)現(xiàn)的功能比較簡(jiǎn)單，但是結(jié)構(gòu)算是完整的，和管道類似，想應(yīng)用此攔截器需要注入在app模塊，

在providers數(shù)組種添加

{ provide: HTTP_INTERCEPTORS, useClass: CommonInterceptor, multi: true }

攔截器根據(jù)業(yè)務(wù)復(fù)雜度，其內(nèi)容也隨著復(fù)雜，通常管理下共通的配置，核心是處理各類異常，甚至錯(cuò)誤碼處理。

總結(jié)

以上所述是小編給大家介紹的Angular8 Http攔截器簡(jiǎn)單使用教程，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

向AI問(wèn)一下細(xì)節(jié)

Angular8 Http攔截器簡(jiǎn)單使用教程

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽