So verwenden Sie einen HTTP-Server in AngularJS

Dieses Mal zeige ich Ihnen, wie Sie den HTTP-Server in AngularJS verwenden und welche Vorsichtsmaßnahmen für die Verwendung des HTTP-Servers in AngularJS gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

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. 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 Promise-Objekt 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, wenn das Die Antwort wird zurückgegeben, um Rückrufe zu verarbeiten. 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 then()-Methode und den anderen beiden Methoden besteht darin, dass sie das vollständige Antwortobjekt empfängt, während success() und error() zerstört das Antwortobjekt.

3. Schnelle Get-Anfrage

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

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

Sie können beispielsweise 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 auch $http als Funktion verwenden. In diesem Fall müssen Sie a übergeben Einstellungsobjekt, das zur Veranschaulichung der Erstellung eines XHR-Objekts verwendet wird.

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

Das Einstellungsobjekt kann die folgenden Hauptschlüssel enthalten:

①method

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 ein Objekt, das in die Abfrage konvertiert wird Zeichenfolge wird an die URL angehängt. Wenn der Wert keine Zeichenfolge ist, wird er JSON-serialisiert.

Zum Beispiel:

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

④data (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 Attribute.

◇data: Diese Daten stellen den konvertierten Antworttext dar (falls Konvertierung definiert ist)

◇status: HTTP-Statuscode der Antwort

◇headers: Diese Funktion ist The Die Getter-Funktion der Header-Informationen kann einen Parameter akzeptieren, um den entsprechenden Namenswert zu erhalten

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): Dieser String 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 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.

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:

Zusammenfassung häufig verwendeter Interception-String-Methoden in JavaScript

Wie man Vue Keep-Alive verwendet Daten anfordern

Das obige ist der detaillierte Inhalt vonSo verwenden Sie einen HTTP-Server in AngularJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!