AngularJS_AngularJS での $http サービスの使用法の概要

組み込みの $http サービスを使用して、外部の世界と直接通信できます。 $http サービスは、ブラウザのネイティブ XMLHttpRequest オブジェクトを単純にカプセル化します。

1. チェーンコール

$http サービスは、1 つのパラメータのみを受け入れることができる関数です。このパラメータは、HTTP リクエストの生成に使用される構成コンテンツを含むオブジェクトです。この関数は、success と error の 2 つのメソッドを持つ Promise オブジェクトを返します。

$http({
url:'data.json',
method:'GET'
}).success(function(data,header,config,status){
//响应成功
}).error(function(data,header,config,status){
//处理响应失败
});

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

var promise=$http({
method:'GET',
url:"data.json"
});

$http メソッドは Promise オブジェクトを返すため、応答が返されたときに then メソッドを使用してコールバックを処理できます。 then メソッドを使用すると、対応するオブジェクトの成功または失敗の情報を表す特別なパラメーターが取得されます。また、2 つのオプションの関数をパラメーターとして受け入れることもできます。または、代わりに成功およびエラーのコールバックを使用することもできます。

promise.then(function(resp){
//resp是一个响应对象
},function(resp){
//带有错误信息的resp
});

またはこれ:

promise.success(function(data,status,config,headers){
//处理成功的响应
});
promise.error(function(data,status,hedaers,config){
//处理失败后的响应
});

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

3. クイック取得リクエスト

①$http.get('/api/users.json');

get() メソッドは HttpPromise オブジェクトを返します。

たとえば、delete/head/jsonp/post/put を送信することもできます。関数

で受け入れられる特定のパラメータについては、148 ページを参照してください。

② jsonp リクエストを送信する例をもう一度考えます。JSONP リクエストを送信するには、URL に JSON_CALLBACK という単語が含まれている必要があります。

jsonp(url,config) config はオプションです

varpromise=$http.jsonp("/api/users.json?callback=JSON_CALLBACK");

4. $http を関数として使用することもできます。この場合、XHR オブジェクトの構築方法を説明するために設定オブジェクトを渡す必要があります。

$http({
method:'GET',
url:'/api/users.json',
params:{
'username':'tan'
});

設定オブジェクトには次のメインキーを含めることができます:

①方法

可能性: GET/DELETE/HEAD/JSONP/POST/PUT

②url: 絶対または相対リクエストターゲット
③params (文字列マップまたはオブジェクト)
このキーの値は文字列マップまたはオブジェクトであり、クエリ文字列に変換されて URL に追加されます。値が文字列でない場合は、JSON でシリアル化されます。
例:

//参数会转为？name=ari的形式
$http({
params:{'name':'ari'}
});

④データ(文字列またはオブジェクト)

このオブジェクトには、メッセージ本文としてサーバーに送信されるデータが含まれています。通常は、POST リクエストを送信するときに使用されます。

AngularJS 1.3 以降では、POST リクエストでバイナリ データも送信できるようになりました。 BLOB オブジェクトを送信するには、data パラメーターを使用して単純に渡すことができます。
例:

var blob=new Blob(['Hello world'],{type:'text/plain'});
$http({
method:'POST',
url:'/',
data:blob
});

4. 応答オブジェクト

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

データ

このデータは、変換された応答本文を表します (変換が定義されている場合)

ステータス

レスポンス HTTP ステータス コード

ヘッダー

この関数はヘッダー情報のゲッター関数であり、1 つのパラメーターを受け入れて対応する名前の値を取得できます

たとえば、次のコードを使用して X-Auth-ID の値を取得します。

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

構成

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

ステータステキスト(文字列)

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

5. HTTP リクエストのキャッシュ

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

$http.get('/api/users.json',{ cache: true })
.success(function(data) {})
.error(function(data) {});

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

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

AngularJS で使用されるキャッシュをさらにカスタム制御したい場合は、true の代わりにカスタム キャッシュ インスタンスをリクエストに渡すことができます。

AngularJS $http の知識についてお話しましょう。

AngularJS $http は、Web サーバー上のデータを読み取るためのサービスです。

$http.get(url) はサーバーデータを読み取るために使用される関数です。

AngularJS の例

<div ng-app="myApp" ng-controller="customersCtrl"> 
<ul>
<li ng-repeat="x in names">
{{ x.Name + ', ' + x.Country }}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php")
.success(function(response) {$scope.names = response.records;});
});
</script>