Anglar 6カプセル化http要求の手順詳細

最近は時間を割いてAnglar 6を勉強しましたが、以前は主にvueを使っていましたので、避けられないのもAnglar 6が提供するツールをいくつかパッケージ化したいです。今日は主にこのhttpモジュールについて説明します。
以前使ったajaxライブラリはaxiosで、baseurlを設定することができます。集中捕捉エラーなど、Anglar 6の依存注入機構により、httpモジュールの露出した変数を直接修正することでパッケージ化することはできませんが、公的文書によりインターセプター（HttpInterceptor）により実現できることが分かります。
ブロックは要求をブロックしてもいいし、応答をブロックしてもいいです。ブロック要求によってbaseurlをセットすることができます。ブロッキング応答によって、集中捕獲エラーが実現される。余計なことを言わないで、コードを入れてください。
第一歩：準備作業、HttpClientModuleを導入する
app.module.tsにHttpClientModuleを導入し、imports配列にHttp ClientModuleをBrowserModuleに追加した後、具体的なコードは：

import { HttpClientModule } from '@angular/common/http';
@NgModule({
 imports: [
 BrowserModule,
 // import HttpClientModule after BrowserModule.
 HttpClientModule,
 ],
 declarations: [
 AppComponent,
 ],
 bootstrap: [ AppComponent ]
})

ステップ2：ブロックに関するファイルを新規作成します。
appフォルダの下にhttp-intereptorsフォルダを新規作成し、その内にbase-index.tsの2つのファイルを新規作成します。ここで、base-intereptor.tsはブロックを設定するための注入器ファイルであり、index.tsは拡張ブロックのプロバイダである。

### base-interceptor.ts
import { Injectable } from '@angular/core';
import {
 HttpEvent, HttpInterceptor, HttpHandler, HttpRequest,
 HttpErrorResponse
} from '@angular/common/http';
import { throwError } from 'rxjs'
import { catchError, retry } from 'rxjs/operators';
/*        ，    */
const baseurl = 'http://localhost:8360';
@Injectable()
export class BaseInterceptor implements HttpInterceptor {
 constructor() {}
 intercept(req, next: HttpHandler) {
 let newReq = req.clone({
  url: req.hadBaseurl ? `${req.url}` : `${baseurl}${req.url}`,
 });
 /*         ，token       */
 if(!req.cancelToken) {
  /*token        ，   localStorage      */
  newReq.headers =
  newReq.headers.set('token', 'my-new-auth-token')
 }
 // send cloned request with header to the next handler.
 return next.handle(newReq)
  .pipe(
  /*     2 ，     */
  retry(2),
  /*      ，         ，    ，       */
  catchError(this.handleError)
  )
 }
 private handleError(error: HttpErrorResponse) {
 if (error.error instanceof ErrorEvent) {
  // A client-side or network error occurred. Handle it accordingly.
  console.error('An error occurred:', error.error.message);
 } else {
  // The backend returned an unsuccessful response code.
  // The response body may contain clues as to what went wrong,
  console.error(
  `Backend returned code ${error.status}, ` +
  `body was: ${error.error}`);
 }
 // return an observable with a user-facing error message
 return throwError(
  'Something bad happened; please try again later.');
 };
}
### index.ts
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { BaseInterceptor } from './base-interceptor';
/** Http interceptor providers in outside-in order */
export const httpInterceptorProviders = [
 { provide: HTTP_INTERCEPTORS, useClass: BaseInterceptor, multi: true },
];
/*
Copyright 2017-2018 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

reqオブジェクトをクローンすることで要求をブロックでき、next.handle（newReq）を操作した結果、応答をブロックすることができます。修正が必要ならば、base-intereptor.tsを直接拡張したり、base-intereptor.tsファイルを参照して他のファイルを新規作成し、index.tsに正しくこのブロックを導入して、http InterceptorProviders配列に追加すればいいです。
ステップ3：登録プロバイダ
app.module.tsに以下のコードを追加します。

import { httpInterceptorProviders } from './http-interceptors/index'
@NgModule({
 declarations: [
 AppComponent
 ],
 imports: [
 BrowserModule,
 HttpClientModule
 ],
 providers: [
 httpInterceptorProviders
 ],
 bootstrap: [AppComponent]
})

第四ステップ、baseurlを抽出する。
バックグラウンドを便利にするために、baseurlをグローバル変数として抽出し、index.で設定します。

# index.html   
<script>
 window.baseurl = "http://localhost:8360"
</script>
# base-interceptor.ts   
const baseurl = window.baseurl;

このようにバックグラウンドを修正するなら、index.の変数を修正すればいいです。再コンパイルする必要はありません。また、これらの後期に変更可能な変数は、直接index.に置くことを推奨します。キャッシュの原因で、jsファイルに入れて再導入すると、ファイルは更新できないし、毎回ファイル名を変更する必要があります。必要でないトラブルを招きます。
これでAnglar 6のhttpモジュールのパッケージはほぼ完成しました。必要があれば、自分で拡張できます。第二ステップを参照してください。
ps：次はvueとanglarの違いを見ます。
1.vueはmvmのview層だけで、jqueryのようなツールボックスで、フレームではなく、angglarはmvmフレームです。
2.vueの双方向邦はES 5中のgetter/setterに基づいて実現されますが、angglarは自分で一連のモジュレータルールを実現するので、いわゆる「汚い」検査を行う必要があります。vueは必要ありません。したがって、Vueは性能的にはより効率的ですが、価格はie 9以下のブラウザにはサポートできません。
3.vueは一つのelの対象を提供して具体化を行う必要があり、その後のすべての作用範囲もelの対象の下で、angglarは全体のhtmlページです。一つのページには、複数のvueのインスタンスがありますが、angglarはそうではないようです。
4.vueは本当に使いやすくて、勉強のコストが比較的に低いですが、参考できる資料はそんなに豊富ではありません。公式文書は比較的簡単で、全面的な使用事例が足りません。高级な使い方は、自分でソースコードを研究する必要があります。
締め括りをつける
以上は小编が绍介したAngullar 6カプセルhttp要求のステップです。皆様に助けを求めています。もし何か疑问があれば、メッセージをください。小编はすぐに返事します。ここでも私たちのサイトを応援してくれてありがとうございます。