Angularで$httpサービスを使用する方法

今回は angular で $http サービスを使用する方法を説明します。 angular で $http サービスを使用する際の 注意事項 は何ですか? 実際のケースを見てみましょう。

$http service

$http(requestConfig) は、カプセル化された XMLHttpRequest オブジェクトです。

requestConfig は、リクエストパラメータを送信するために使用されるオブジェクトです。

Promise オブジェクトを返します

$http({ method: 'GET', url: '/someUrl' }).then(function successCallback(response) { // 请求成功执行代码 }, function errorCallback(response) { // 请求失败执行代码 });

Promise が返されると、チェーンで呼び出すことができます。 then メソッドを使用してコールバックを処理することもできます。

応答

ステータスコードが200から299の間の場合、応答は成功したとみなされ、successコールバックが呼び出されます。それ以外の場合は、errorコールバックが呼び出されます。

HttpPromise オブジェクトの then()、success()、error() メソッドを呼び出します。 then() メソッドと他の 2 つのメソッドの主な違いは、このメソッドは完全な応答オブジェクトを受け取るのに対し、success() と error() は応答オブジェクトを破棄することです。

ショートカット メソッド

$http.get
$http.get
$http.head
$http.post
$http.put
$http.delete
$http.jsonp
$http.patch

応答オブジェクト

AngularJS によって then() メソッドに渡される応答オブジェクトには 4 つのプロパティが含まれています。

 データ (

文字列
またはオブジェクト) このデータは、変換されたレスポンスボディを表します (変換が定義されている場合)。 ステータス(数値型)
レスポンスの
HTTPステータスコード
。  headers (関数) この関数はヘッダー情報のゲッター関数であり、パラメータを受け取って対応する名前の値を取得できます。たとえば、次のコードを使用して X-Auth-ID の値を取得します。

method: 'GET',url: '/api/users.json'}).then (resp) {// 读取X-Auth-ID
resp.headers('X-Auth-ID');
});

 config (オブジェクト)
このオブジェクトは、元のリクエストの生成に使用される完全な設定オブジェクトです。

 statusText (文字列)

この文字列は、応答の HTTP ステータス テキストです。


$http リクエストのキャッシュ
デフォルトでは、$http サービスはリクエストをローカルにキャッシュしません。個別のリクエストを送信するとき、ブール値またはキャッシュ インスタンスを

$http リクエストに渡すことでキャッシュを有効にできます。

.success(function(data) {})
 .error(function(data) {});

初めてリクエストが送信されると、$http サービスは GET リクエストを /api/users.json に送信します。同じ GET
リクエストが 2 回目に送信されると、$http サービスは実際に HTTP GET リクエストを送信せずに、キャッシュからリクエスト結果を取得します。

この例では、キャッシュが有効になっているため、AngularJS はデフォルトで $cacheFactory を使用します。このサービスは、

AngularJS の開始時に自動的に作成されます。
たとえば、LRU (Least Recenlty Used、最も最近使用されていない) キャッシュを使用したい場合は、次のように
キャッシュ インスタンス オブジェクトを渡すことができます:

var lru = $cacheFactory('lru',{capacity: 20
 }); // $http请求
 $http.get('/api/users.json', { cache: lru })
 .success(function(data){})
 .error(function(data){});

毎回カスタム キャッシュを渡すのは非常に面倒です。 (サービス中でも) リクエストを送信します。 .config() 関数を適用することで、すべての $http リクエストにデフォルトのキャッシュを設定できます:

 angular.module('myApp', [])
      .config(function($httpProvider, $cacheFactory) {
      $httpProvider.defaults.cache = $cacheFactory('lru', {
      capacity: 20
      });
      });

これで、すべてのリクエストはカスタム LRU キャッシュを使用するようになります。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Html5 での localStorage の使用の詳細な説明

動的メニューまたはドロップダウン リストを作成する JavaScript コード

対応するレイアウトでの現在の適合性を判断する JavaScript コード

テキストの単語数を制限する JavaScript コード

以上がAngularで$httpサービスを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。