Heim > Web-Frontend > js-Tutorial > So verwenden Sie den $http-Dienst in Angular

So verwenden Sie den $http-Dienst in Angular

php中世界最好的语言
Freigeben: 2018-03-16 17:24:09
Original
1611 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie den $http-Dienst in Angular verwenden. Was sind die Vorsichtsmaßnahmen, wenn Sie den $http-Dienst in Angular verwenden? Werfen wir einen Blick darauf.

$http-Dienst

$http(requestConfig) ist nur ein gekapseltes XMLHttpRequest-Objekt.

requestConfig ist ein Objekt, das zum Senden von Anforderungsparametern verwendet wird.

Gibt ein Promise-Objekt zurück

$http({ method: 'GET', url: '/someUrl' }).then(function successCallback(response) { // 请求成功执行代码 }, function errorCallback(response) { // 请求失败执行代码 });
Nach dem Login kopieren

Wenn Promise zurückgegeben wird, kann es in einer Kette aufgerufen werden. Sie können die Methode then auch zum Verarbeiten von Rückrufen verwenden.

Wenn der Statuscode der Antwort zwischen 200 und 299 liegt, gilt die Antwort als erfolgreich und der Erfolgsrückruf wird aufgerufen, andernfalls wird der Fehlerrückruf
aufgerufen .

Rufen Sie die Methoden then(), success() und error() für das HttpPromise-Objekt auf. Der Hauptunterschied zwischen der then()-Methode und den beiden anderen Methoden besteht darin, dass sie das vollständige Antwortobjekt empfängt, während success() und error() das Antwortobjekt zerstören.

Shortcut-Methode

$http.get
$http.get
$http.head
$http.post
$http.put
$http.delete
$http.jsonp
$http.patch
Nach dem Login kopieren
Antwortobjekt

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

 Daten (
Zeichenfolge oder Objekt) Diese Daten stellen den konvertierten Antworttext dar (sofern eine Konvertierung definiert ist).
 Status (numerischer Typ)
Der
HTTP-Statuscode der Antwort.  Header (Funktion)
Diese Funktion ist die Getter-Funktion für Header-Informationen, die einen Parameter akzeptieren kann, um den Wert des entsprechenden Namens abzurufen. Verwenden Sie beispielsweise den folgenden Code, um den Wert der X-Auth-ID zu erhalten:

 config (object)
method: 'GET',url: '/api/users.json'}).then (resp) {// 读取X-Auth-ID
resp.headers('X-Auth-ID');
});
Nach dem Login kopieren
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.


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

Wenn eine Anfrage zum ersten Mal gesendet wird, sendet der $http-Dienst eine GET-Anfrage an /api/users.json. Wenn dieselbe GET
.success(function(data) {})
 .error(function(data) {});
Nach dem Login kopieren
-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 beispielsweise den LRU-Cache (Least Recenlty Used, am wenigsten kürzlich verwendet) verwenden möchten, können Sie das
Cache-Instanzobjekt wie folgt übergeben:


jedes Zeit, zu der eine Anfrage gesendet wird. Die Übergabe eines benutzerdefinierten Caches ist umständlich (sogar in einem Dienst). Sie können einen Standardcache für alle $http-Anfragen festlegen, indem Sie die .config()-Funktion von
var lru = $cacheFactory('lru',{capacity: 20
 }); // $http请求
 $http.get('/api/users.json', { cache: lru })
 .success(function(data){})
 .error(function(data){});
Nach dem Login kopieren
anwenden:


Jetzt verwenden alle Anfragen unseren benutzerdefinierten LRU-Cache.
 angular.module('myApp', [])
      .config(function($httpProvider, $cacheFactory) {
      $httpProvider.defaults.cache = $cacheFactory('lru', {
      capacity: 20
      });
      });
Nach dem Login kopieren


Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.


Empfohlene Lektüre:

Ausführliche Erläuterung der Verwendung von localStorage in Html5


JavaScript-Code zur dynamischen Erstellung Menüs oder Dropdown-Listen


JavaScript-Code zur Ermittlung der aktuellen Fitness im entsprechenden Layout


JavaScript-Code zu Begrenzen Sie die Anzahl der Textwörter

Das obige ist der detaillierte Inhalt vonSo verwenden Sie den $http-Dienst in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage