js STUDIO

$httpBackend

概要

擬似HTTPバックエンド実装は、end-to-endのテストや、$httpサービスを使用するアプリケーションのバックエンド以下の開発に適しています。

注意: 擬似HTTPバックエンド実装をユニットテストに適用する場合は、 ユニットテストの$httpBackendモックを参照してください。

この実装では静的なレスポンス、またはwhenAPIと、それらの略記(whenGET、whenPOST、他)と、 リクエストを通して任意に渡される、特定のリクエストのための実際の$httpBackendのレスポンスを使用することが出来ます。 (例: 特定のリモートAPIと対話したり、Webサーバからテンプレートを取得するため)

ユニットテストに反して、エンドツーエンドのテストシナリオ、 またはアプリケーションが開発される際に実際のバックエンドAPIをモックに置き換えるシナリオでは、 モックを通さない特定のカテゴリーのリクエストが望ましい事がよくあり、実際のHTTPリクエストが発行されます。 (例: テンプレートまたは静的なファイルをWebサーバから取得するため) この振る舞いの設定をバックエンドに行うには、レスポンスの際に代わりにpassThroughリクエストハンドラを使用します。

更に、我々はユニットテスト中に行うように、リクエストを手動でflushして欲しくないと考えています。 その理由は、e2eの$httpBackendは自動的にリクエストをflushし、 XMLHttpRequestオブジェクトの振る舞いを厳密にシミュレートするからです。

このHTTPバックエンドを使用したアプリケーション実行をセットアップするために、 ngMockE2Eと自分のアプリケーションモジュールに依存したモジュールを作成し、 擬似バックエンドを定義しなければいけません。 

myAppDev = angular.module('myAppDev', ['myApp', 'ngMockE2E']);
myAppDev.run(function($httpBackend) {
  phones = [{name: 'phone1'}, {name: 'phone2'}];

  // 現在のphonesのリスクが返ります
  $httpBackend.whenGET('/phones').respond(phones);

  // phones配列に新しいphoneを追加します
  $httpBackend.whenPOST('/phones').respond(function(method, url, data) {
    phones.push(angular.fromJson(data));
  });
  $httpBackend.whenGET(/^/templates//).passThrough();
  //...
});

その後、この新しいモジュールで自分のアプリケーションを立ち上げます。

when(method, url, data, headers)

新しいバックエンド定義を作成します。

引数 説明
method

型：string

HTTPメソッドを指定します。

url

型：string、RegExp

HTTPのURLを指定します。

data(optional)

型：string、RegExp

HTTPリクエストのボディを指定します。

headers(optional)

型：Object、function(Object)

HTTPヘッダー、またはHTTPヘッダーオブジェクトを受け取り、 もしヘッダーが現在の定義にマッチしたらtrueを返す関数を指定します。

戻り値 説明
 

型：requestHandler

マッチしたリクエストの取り扱いを制御するrespondとpassThroughメソッド付きのオブジェクトを返します。

respond – {function([status,] data[, headers])|function(function(method, url, data, headers)}
respondメソッドは、返される静的なデータのセット、 またはレスポンスステータス(number)、レスポンスデータ(string)、レスポンスヘッダー(Object)を含む配列を返すことが出来る関数を、 引数として受け取ります。
passThrough – {function()}
passThroughハンドラでバックエンド定義にマッチしたリクエストは、 実際のバックエンドを通して渡されます。 (XHRリクエストがサーバに対して行われます)

whenDELETE(url, headers)

DELETEリクエストのための新しいバックエンド定義を作成します。 詳細は、when()を参照してください。

引数 説明
url

型：string、RegExp

HTTPのURLを指定します。

headers(optional)

型：Object、function(Object)

HTTPのヘッダーを指定します。

 

型：requestHandler

マッチしたリクエストの取り扱いを制御するrespondとpassThroughメソッド付きのオブジェクトを返します。

whenGET(url, headers)

GETリクエストのための新しいバックエンド定義を作成します。 詳細は、when()を参照してください。

引数 説明
url

型：string、RegExp

HTTPのURLを指定します。

headers(optional)

型：Object、function(Object)

HTTPのヘッダーを指定します。

 

型：requestHandler

マッチしたリクエストの取り扱いを制御するrespondとpassThroughメソッド付きのオブジェクトを返します。

whenHEAD(url, headers)

HEADリクエストのための新しいバックエンド定義を作成します。 詳細は、when()を参照してください。

引数 説明
url

型：string、RegExp

HTTPのURLを指定します。

headers(optional)

型：Object、function(Object)

HTTPのヘッダーを指定します。

 

型：requestHandler

マッチしたリクエストの取り扱いを制御するrespondとpassThroughメソッド付きのオブジェクトを返します。

whenJSONP(url)

JSONPリクエストのための新しいバックエンド定義を作成します。 詳細は、when()を参照してください。

引数 説明
url

型：string、RegExp

HTTPのURLを指定します。

 

型：requestHandler

マッチしたリクエストの取り扱いを制御するrespondとpassThroughメソッド付きのオブジェクトを返します。

whenPATCH(url, data, headers)

PATCHリクエストのための新しいバックエンド定義を作成します。 詳細は、when()を参照してください。

引数 説明
url

型：string、RegExp

HTTPのURLを指定します。

data(optional)

型：string、RegExp

HTTPのリクエストボディを指定します。

headers(optional)

型：Object、function(Object)

HTTPのヘッダーを指定します。

 

型：requestHandler

マッチしたリクエストの取り扱いを制御するrespondとpassThroughメソッド付きのオブジェクトを返します。

whenPOST(url, data, headers)

POSTリクエストのための新しいバックエンド定義を作成します。 詳細は、when()を参照してください。

引数 説明
url

型：string、RegExp

HTTPのURLを指定します。

data(optional)

型：string、RegExp

HTTPのリクエストボディを指定します。

headers(optional)

型：Object、function(Object)

HTTPのヘッダーを指定します。

 

型：requestHandler

マッチしたリクエストの取り扱いを制御するrespondとpassThroughメソッド付きのオブジェクトを返します。

whenPUT(url, data, headers)

PUT(リクエストのための新しいバックエンド定義を作成します。 詳細は、when()を参照してください。

引数 説明
url

型：string、RegExp

HTTPのURLを指定します。

headers(optional)

型：Object、function(Object)

HTTPのヘッダーを指定します。

 

型：requestHandler

マッチしたリクエストの取り扱いを制御するrespondとpassThroughメソッド付きのオブジェクトを返します。

 Back to top

© 2017 Google
Licensed under the Creative Commons Attribution License 3.0.

このページは、ページトップのリンク先のAngularJS公式ドキュメント内のページを翻訳した内容を基に構成されています。 下記の項目を確認し、必要に応じて公式のドキュメントをご確認ください。 もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

  • AngularJSの更新頻度が高いため、元のコンテンツと比べてドキュメントの情報が古くなっている可能性があります。
  • "訳注:"などの断わりを入れた上で、日本人向けの情報やより分かり易くするための追記を行っている事があります。