欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2019年08月20日 13:43:15   作者:何棄療  
這篇文章主要介紹了Angular8 Http攔截器簡(jiǎn)單使用教程,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

攔截器

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

先看一組常見的業(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;
  }
  // 過濾掉不需要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ò)誤頁面
      }
     }
    },
    error => {
     // token過期 服務(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ì)大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會(huì)及時(shí)回復(fù)大家的!

相關(guān)文章

  • angular select 默認(rèn)值設(shè)置方法

    angular select 默認(rèn)值設(shè)置方法

    下面小編就為大家?guī)硪黄猘ngular select 默認(rèn)值設(shè)置方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-06-06
  • Angularjs實(shí)現(xiàn)控制器之間通信方式實(shí)例總結(jié)

    Angularjs實(shí)現(xiàn)控制器之間通信方式實(shí)例總結(jié)

    這篇文章主要介紹了Angularjs實(shí)現(xiàn)控制器之間通信方式,結(jié)合實(shí)例形式總結(jié)分析了AngularJS控制器常用通信方式及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
    2018-03-03
  • Angualrjs和bootstrap相結(jié)合實(shí)現(xiàn)數(shù)據(jù)表格table

    Angualrjs和bootstrap相結(jié)合實(shí)現(xiàn)數(shù)據(jù)表格table

    這篇文章主要介紹了Angualrjs和bootstrap相結(jié)合實(shí)現(xiàn)數(shù)據(jù)表格table,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下
    2017-03-03
  • AngularJS基礎(chǔ)學(xué)習(xí)筆記之控制器

    AngularJS基礎(chǔ)學(xué)習(xí)筆記之控制器

    在AngularJS中,控制器是一個(gè)Javascript函數(shù)(類型/類),用來增強(qiáng)除了根作用域意外的作用域?qū)嵗?。?dāng)你或者AngularJS本身通過<code>scope.$new</code>倆創(chuàng)建一個(gè)新的子作用域?qū)ο髸r(shí),有一個(gè)選項(xiàng)能讓你將它當(dāng)做參數(shù)傳遞給控制器。
    2015-05-05
  • AngularJS基礎(chǔ)學(xué)習(xí)筆記之表達(dá)式

    AngularJS基礎(chǔ)學(xué)習(xí)筆記之表達(dá)式

    AngularJS表達(dá)式用于應(yīng)用程序數(shù)據(jù)綁定到HTML。表達(dá)式都寫在雙括號(hào)就像{{表達(dá)式}}。表達(dá)式中的行為跟ng-bind指令方式相同。 AngularJS應(yīng)用表達(dá)式是純javascript表達(dá)式,并輸出它們被使用的數(shù)據(jù)在那里。
    2015-05-05
  • AngularJS入門教程之REST和定制服務(wù)詳解

    AngularJS入門教程之REST和定制服務(wù)詳解

    本文主要講解 AngularJS REST和定制服務(wù)的知識(shí),這里幫大家整理了相關(guān)知識(shí),并附示例代碼,詳細(xì)講解了RES和定制服務(wù)的知識(shí),有興趣的小伙伴可以參考下
    2016-08-08
  • Angularjs 基礎(chǔ)入門

    Angularjs 基礎(chǔ)入門

    這篇文章主要介紹了Angularjs 基礎(chǔ)入門的一些知識(shí),需要的朋友可以參考下
    2014-12-12
  • 使用Angular CLI進(jìn)行單元測(cè)試和E2E測(cè)試的方法

    使用Angular CLI進(jìn)行單元測(cè)試和E2E測(cè)試的方法

    這篇文章主要介紹了使用Angular CLI進(jìn)行單元測(cè)試和E2E測(cè)試的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-03-03
  • 詳解Angular組件數(shù)據(jù)不能實(shí)時(shí)更新到視圖上的問題

    詳解Angular組件數(shù)據(jù)不能實(shí)時(shí)更新到視圖上的問題

    這篇文章主要為大家介紹了Angular組件數(shù)據(jù)不能實(shí)時(shí)更新到視圖上的問題詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-10-10
  • 詳解angular路由高亮之RouterLinkActive

    詳解angular路由高亮之RouterLinkActive

    這篇文章主要介紹了詳解angular路由高亮之RouterLinkActive,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-04-04

最新評(píng)論