Angular8Http攔截器簡單使用教程

攔截器

創新互聯建站是一家集網站建設,濱城企業網站建設,濱城品牌網站建設,網站定制,濱城網站建設報價,網絡營銷,網絡優化,濱城網站推廣為一體的創新建站企業，幫助傳統企業提升企業形象加強企業競爭力。可充分滿足這一群體相比中小企業更為豐富、高端、多元的互聯網需求。同時我們時刻保持專業、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們為更多的企業打造出實用型網站。

Http攔截器就是攔截發出的請求，對其進行統一添加額外處理，然后放行；對響應進行攔截并作出業務上的判斷，決定是否給與返回。

先看一組常見的業務請求：

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
  });

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

定義攔截器

按照官方約定，文件應該是以‘.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>> {
  // 先補全請求協議
  let url = req.url;
  const needToken = ignoreToken.filter(u => url.match(u));
  if (url.indexOf('http://') < 0 || url.indexOf('https://') < 0) {
   url = 'http://' + url;
  }
  // 過濾掉不需要token的請求
  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) {
       // 跳轉錯誤頁面
      }
     }
    },
    error => {
     // token過期 服務器錯誤等處理
    })
  );
 }
}

組件：

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

該攔截器實現的功能比較簡單，但是結構算是完整的，和管道類似，想應用此攔截器需要注入在app模塊，

在providers數組種添加

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

攔截器根據業務復雜度，其內容也隨著復雜，通常管理下共通的配置，核心是處理各類異常，甚至錯誤碼處理。

總結

以上所述是小編給大家介紹的Angular8 Http攔截器簡單使用教程，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！

網頁名稱：Angular8Http攔截器簡單使用教程
文章網址：http://m.newbst.com/article38/pjcesp.html

成都網站建設公司_創新互聯，為您提供商城網站、網站策劃、App開發、網站設計、建站公司、品牌網站制作

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容

免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

Angular8Http攔截器簡單使用教程