ホームページ > 記事 > ウェブフロントエンド > AngularJSでの$httpサービスの使い方の詳しい説明
AngularJSでの$httpサービスの使い方の詳しい説明
- php中世界最好的语言オリジナル
- 2018-05-21 13:53:382306ブラウズ
今回は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服务会向/api/users.json发送一个GET请求。第二次发送同一个GET请求时，$http服务会从缓存中取回请求的结果，而不会真的发送一个HTTP GET请求。
在这个例子里，由于设置了启用缓存，AngularJS默认会使用$cacheFactory,这个服务是AngularJS在启动时自动创建的。
如果想要对AngularJS使用的缓存进行更多的自定义控制，可以向请求传入一个自定义的缓存实例代替true。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上がAngularJSでの$httpサービスの使い方の詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。