Einführung in die Verwendung des $http-Dienstes in 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. Als Nächstes erhalten Sie in diesem Artikel eine kurze Einführung in die Verwendung des HTTP-Dienstes in AngularJS. Freunde, die ihn mögen, können sich auf

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

1. Kettenaufruf

Der $http-Dienst ist eine Funktion, die nur einen Parameter akzeptieren kann, einschließlich des To Generieren Sie den Konfigurationsinhalt der HTTP-Anfrage. 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 so:

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

Der Hauptunterschied zwischen der Methode then() und Die anderen beiden Methoden Der Unterschied besteht darin, dass das vollständige Antwortobjekt empfangen wird, während success() und error() das Antwortobjekt zerstören.

3. Schnelle Get-Anfrage

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

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

Sie können zum Beispiel auch Folgendes senden: delete/head/jsonp/post/put Einzelheiten zu den zulässigen Parametern in der Funktion finden Sie auf Seite 148

② für ein Beispiel Senden einer JSONP-Anfrage: Um eine JSONP-Anfrage zu senden, muss die URL die Wörter 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 String Map oder Das Objekt wird in einen Abfragestring umgewandelt und an die URL angehängt werden. 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 Informationen, die als Nachrichtentextdaten an gesendet werden Der Server. 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

AngularJS wird übergeben Das Antwortobjekt der then( )-Methode enthält vier Eigenschaften.

Daten

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

Status

Der Antwort-HTTP-Statuscode

Header

Diese Funktion ist die Getter-Funktion der Header-Informationen und kann einen Parameter akzeptieren, um den entsprechenden Namen zu erhalten value

Verwenden Sie beispielsweise den folgenden Code, um den Wert von X-Auth-ID zu erhalten:

$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. HTTP-Anfragen zwischenspeichern

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 in diesem Beispiel 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 die Funktion zum Lesen von Serverdaten.

AngularJS-Beispiel

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

Pour plus de didacticiels connexes, veuillez visiter le Tutoriel de base de JavaScript