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

組み込みの $http サービスを使用して、外部の世界と直接通信できます。 $http サービスは、ブラウザのネイティブ XMLHttpRequest オブジェクトを単純にカプセル化します。次に、この記事では、angularjs での http サービスの使用方法について簡単に説明します。気に入った方は、

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

1. チェーン呼び出し

$http サービスは、To を含む 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 はオプションです

var Promise=$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 つのプロパティが含まれています。

data

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

status

応答 HTTP ステータス コード

headers

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

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

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

config

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

statusText (文字列)

この文字列は、応答の 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 の例

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

その他の関連チュートリアルについては、JavaScript 基本チュートリアル