angularjsでhttpサーバーを使用する方法

今回は、angularjsでhttpサーバーを使用する方法と、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 はオプションです

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

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

$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'}
});

④data (文字列またはオブジェクト)

このオブジェクトには、メッセージ本文としてサーバーに送信されるデータが含まれます。通常、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 つのパラメーターを受け取ることができます。対応する名前の値を取得するには使用します

たとえば、次のコードを使用して 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 の代わりにカスタム キャッシュ インスタンスをリクエストに渡すことができます。

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

推奨読書:

一般的な JavaScript 文字列インターセプト方法の概要

vue keep-alive を使用してデータをリクエストする方法

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