Angular 4アプリをテストするためのモックWebサービスを構築するために使用するものはどれですか?
Angular 4アプリをテストするためのモックWebサービスを構築するために使用するものはどれですか?
回答:
Angular 4.3.x以降を使用HttpClient
しているHttpClientModule
場合は、からのクラスを使用します。
import { HttpClientModule } from '@angular/common/http';
@NgModule({
imports: [
BrowserModule,
HttpClientModule
],
...
class MyService() {
constructor(http: HttpClient) {...}
これはhttp
from @angular/http
モジュールのアップグレードバージョンであり、次の点が改善されています。
- インターセプターにより、ミドルウェアロジックをパイプラインに挿入できます。
- 不変のリクエスト/レスポンスオブジェクト
- リクエストのアップロードとレスポンスのダウンロードの両方の進行状況イベント
どのように機能するかについては、AngularのインターセプターとHttpClientメカニズムに関するInsiderのガイドをご覧ください。
- JSONボディタイプのサポートを含む、型指定された同期応答ボディアクセス
- JSONは想定されるデフォルトであり、明示的に解析する必要がなくなりました
- リクエスト後の検証とフラッシュベースのテストフレームワーク
今後、古いhttpクライアントは非推奨になります。ここにコミットメッセージと公式ドキュメントへのリンクがあります。
また、古いhttpがHttp
新しいトークンの代わりにクラストークンを使用して挿入されたことにも注意してHttpClient
ください。
import { HttpModule } from '@angular/http';
@NgModule({
imports: [
BrowserModule,
HttpModule
],
...
class MyService() {
constructor(http: Http) {...}
また、new HttpClient
はtslib
実行時に必要となるようですので、使用している場合はインストールしnpm i tslib
て更新system.config.js
する必要がありますSystemJS
。
map: {
...
'tslib': 'npm:tslib/tslib.js',
また、SystemJSを使用する場合は、別のマッピングを追加する必要があります。
'@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',
node_modules
フォルダを削除してnpm install
再実行
'@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',
繰り返したくはありませんが、他の方法で要約します(新しいHttpClientに追加された機能)。
古い「http」と新しい「HttpClient」の違いを取り上げた記事を書きました。目標は、それを可能な限り簡単な方法で説明することでした。
これは良いリファレンスです。httpリクエストをhttpClientに切り替えるのに役立ちました。
https://blog.hackages.io/angular-http-httpclient-same-but-different-86a50bbcc450
2つの違いを比較し、コード例を示します。
これは、プロジェクトでサービスをhttpclientに変更するときに扱ったいくつかの違いです(前述の記事を借用します)。
import {HttpModule} from '@angular/http';
import {HttpClientModule} from '@angular/common/http';
this.http.get(url)
// Extract the data in HTTP Response (parsing)
.map((response: Response) => response.json() as GithubUser)
.subscribe((data: GithubUser) => {
// Display the result
console.log('TJ user data', data);
});
this.http.get(url)
.subscribe((data: GithubUser) => {
// Data extraction from the HTTP response is already done
// Display the result
console.log('TJ user data', data);
});
注意:返されたデータを明示的に抽出する必要はなくなりました。デフォルトでは、返されるデータがJSONタイプの場合、追加の操作は必要ありません。
ただし、テキストやblobなどの他のタイプの応答を解析する必要がある場合は、 responseType
は、リクエストに。そのようです:
responseType
オプションを使用してGET HTTPリクエストを行う: this.http.get(url, {responseType: 'blob'})
.subscribe((data) => {
// Data extraction from the HTTP response is already done
// Display the result
console.log('TJ user data', data);
});
すべてのリクエストに私の承認用のトークンを追加するためにインターセプターも使用しました:
これは良いリファレンスです: https //offering.solutions/blog/articles/2017/07/19/angular-2-new-http-interface-with-interceptors/
そのようです:
@Injectable()
export class MyFirstInterceptor implements HttpInterceptor {
constructor(private currentUserService: CurrentUserService) { }
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
// get the token from a service
const token: string = this.currentUserService.token;
// add it if we have one
if (token) {
req = req.clone({ headers: req.headers.set('Authorization', 'Bearer ' + token) });
}
// if this is a login-request the header is
// already set to x/www/formurl/encoded.
// so if we already have a content-type, do not
// set it, but if we don't have one, set it to
// default --> json
if (!req.headers.has('Content-Type')) {
req = req.clone({ headers: req.headers.set('Content-Type', 'application/json') });
}
// setting the accept header
req = req.clone({ headers: req.headers.set('Accept', 'application/json') });
return next.handle(req);
}
}
そのかなり素晴らしいアップグレード!
厳密に型指定されたコールバックでHttpClientを使用できるライブラリがあります。
データとエラーは、これらのコールバックを介して直接利用できます。
ObservableでHttpClientを使用する場合は、コードの残りの部分で.subscribe(x => ...)を使用する必要があります。
これは、観察可能な< HttpResponse
< T
>>に縛られるのHttpResponse。
これにより、httpレイヤーが残りのコードと密接に結合されます。
このライブラリは.subscribe(x => ...)部分をカプセル化し、モデルを通じてデータとエラーのみを公開します。
強く型付けされたコールバックを使用すると、コードの残りの部分でモデルを処理するだけで済みます。
ライブラリはangular-extended-http-clientと呼ばれます。
GitHubのangular-extended-http-clientライブラリ
NPMのangular-extended-http-clientライブラリ
とても使いやすい。
強く型付けされたコールバックは
成功:
T
>T
>失敗:
TError
>TError
>import { HttpClientExtModule } from 'angular-extended-http-client';
@NgModuleインポートで
imports: [
.
.
.
HttpClientExtModule
],
//Normal response returned by the API.
export class RacingResponse {
result: RacingItem[];
}
//Custom exception thrown by the API.
export class APIException {
className: string;
}
サービスでは、これらのコールバックタイプを使用してパラメーターを作成するだけです。
次に、それらをHttpClientExtのgetメソッドに渡します。
import { Injectable, Inject } from '@angular/core'
import { RacingResponse, APIException } from '../models/models'
import { HttpClientExt, IObservable, IObservableError, ResponseType, ErrorType } from 'angular-extended-http-client';
.
.
@Injectable()
export class RacingService {
//Inject HttpClientExt component.
constructor(private client: HttpClientExt, @Inject(APP_CONFIG) private config: AppConfig) {
}
//Declare params of type IObservable<T> and IObservableError<TError>.
//These are the success and failure callbacks.
//The success callback will return the response objects returned by the underlying HttpClient call.
//The failure callback will return the error objects returned by the underlying HttpClient call.
getRaceInfo(success: IObservable<RacingResponse>, failure?: IObservableError<APIException>) {
let url = this.config.apiEndpoint;
this.client.get(url, ResponseType.IObservable, success, ErrorType.IObservableError, failure);
}
}
コンポーネントに、サービスが挿入され、次に示すようにgetRaceInfo APIが呼び出されます。
ngOnInit() {
this.service.getRaceInfo(response => this.result = response.result,
error => this.errorMsg = error.className);
}
コールバックで返される応答とエラーはどちらも厳密に型指定されています。例えば。応答はRacingResponseタイプで、エラーはAPIExceptionです。
これらの強く型付けされたコールバックでモデルを処理するだけです。
したがって、残りのコードはモデルについてのみ認識します。
また、従来のルートを使用して、Service APIからObservable < HttpResponse<
T >
> を返すこともできます。
HttpClientは4.3に付属する新しいAPIであり、進行状況イベント、デフォルトでのjson逆シリアル化、Interceptorsおよびその他の多くの優れた機能をサポートするAPIを更新しました。詳細はこちらhttps://angular.io/guide/http
Httpは古いAPIであり、最終的には廃止される予定です。
基本的なタスクの使用法は非常に似ているため、HttpClientを使用することをお勧めします。HttpClientは、よりモダンで使いやすい代替手段であるためです。