Einführung in die Verwendung des $http-Dienstes in AngularJS_AngularJS

Wir können den integrierten $http-Dienst nutzen, um direkt mit der Außenwelt zu kommunizieren. Der $http-Dienst kapselt einfach das native XMLHttpRequest-Objekt des Browsers.

1. Kettenruf

Der $http-Dienst ist eine Funktion, die nur einen Parameter akzeptieren kann. Dieser Parameter ist ein Objekt, das den Konfigurationsinhalt enthält, der zum Generieren von HTTP-Anfragen verwendet wird. Diese Funktion gibt ein Promise-Objekt mit zwei Methoden zurück: Erfolg und Fehler.

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

2. Ein Versprechensobjekt zurückgeben

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

Da die $http-Methode ein Promise-Objekt zurückgibt, können wir die then-Methode verwenden, um den Rückruf zu verarbeiten, wenn die Antwort zurückgegeben wird. Wenn Sie die Methode then verwenden, erhalten Sie einen speziellen Parameter, der die Erfolgs- oder Fehlerinformationen des entsprechenden Objekts darstellt und auch zwei optionale Funktionen als Parameter akzeptieren kann. Oder Sie können stattdessen Erfolgs- und Fehlerrückrufe verwenden.

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

Oder das:

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

Der Hauptunterschied zwischen der

then()-Methode und den anderen beiden Methoden besteht darin, dass sie ein vollständiges Antwortobjekt empfängt, während success() und error() das Antwortobjekt zerstören.

3. Schnellanfrage

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

Die get()-Methode gibt das HttpPromise-Objekt zurück.

Sie können beispielsweise auch Folgendes senden: delete/head/jsonp/post/put. Bitte lesen Sie auf Seite 148 nach, welche spezifischen Parameter in der Funktion zulässig sind

② Nehmen Sie noch einmal das Beispiel des Sendens einer JSONP-Anfrage: Um eine JSONP-Anfrage zu senden, muss die URL das Wort JSON_CALLBACK enthalten.

jsonp(url,config) wobei config optional ist

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

4. Sie können $http auch als Funktion verwenden. In diesem Fall müssen Sie ein Einstellungsobjekt übergeben, um zu erklären, wie das XHR-Objekt erstellt wird.

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

Das Einstellungsobjekt kann die folgenden Hauptschlüssel enthalten:

①Methode

Kann sein: GET/DELETE/HEAD/JSONP/POST/PUT

②url: absolutes oder relatives Anforderungsziel
③params (String-Map oder Objekt)
Der Wert dieses Schlüssels ist eine Zeichenfolgenzuordnung oder ein Objekt, das in eine Abfragezeichenfolge umgewandelt und an die URL angehängt wird. Wenn der Wert keine Zeichenfolge ist, wird er JSON-serialisiert.
Zum Beispiel:

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

④Daten (Zeichenfolge oder Objekt)

Dieses Objekt enthält die Daten, die als Nachrichtentext an den Server gesendet werden. Wird normalerweise beim Senden von POST-Anfragen verwendet.

Ab AngularJS 1.3 können auch Binärdaten in POST-Anfragen gesendet werden. Um ein Blob-Objekt zu senden, können Sie es einfach mithilfe des Datenparameters übergeben.
Zum Beispiel:

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

4. Antwortobjekt

Das von AngularJS an die then()-Methode übergebene Antwortobjekt enthält vier Eigenschaften.

Daten

Diese Daten stellen den konvertierten Antworttext dar (sofern eine Konvertierung definiert ist)

Status

Antwort-HTTP-Statuscode

Kopfzeilen

Diese Funktion ist die Getter-Funktion für Header-Informationen, die einen Parameter akzeptieren kann, um den entsprechenden Namenswert zu erhalten

Verwenden Sie beispielsweise den folgenden Code, um den Wert der X-Auth-ID abzurufen:

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

config

Dieses Objekt ist das vollständige Einstellungsobjekt, das zum Generieren der ursprünglichen Anfrage verwendet wird.

statusText(String)

Diese Zeichenfolge ist der HTTP-Statustext der Antwort.

5. Zwischenspeichern von HTTP-Anfragen

Standardmäßig speichert der $http-Dienst Anfragen nicht lokal zwischen. Bei einzelnen Anfragen können wir das Caching aktivieren, indem wir einen booleschen Wert oder eine Cache-Instanz an die $http-Anfrage übergeben.

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

Wenn eine Anfrage zum ersten Mal gesendet wird, sendet der $http-Dienst eine GET-Anfrage an /api/users.json. Wenn dieselbe GET-Anfrage zum zweiten Mal gesendet wird, ruft der $http-Dienst das Anfrageergebnis aus dem Cache ab, ohne tatsächlich eine HTTP-GET-Anfrage zu senden.

Da das Caching aktiviert ist, verwendet AngularJS standardmäßig $cacheFactory. Dieser Dienst wird automatisch von AngularJS erstellt, wenn er gestartet wird.

Wenn Sie mehr individuelle Kontrolle über den von AngularJS verwendeten Cache wünschen, können Sie statt „true“ eine benutzerdefinierte Cache-Instanz an die Anfrage übergeben.

Lassen Sie mich Ihnen etwas über AngularJS $http-Wissen erzählen.

AngularJS $http ist ein Dienst zum Auslesen von Daten auf dem Webserver.

$http.get(url) ist eine Funktion zum Lesen von Serverdaten.

AngularJS-Beispiel

<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>