Ausführliche Erklärung zur Verwendung des $http-Dienstes in AngularJS

Dieses Mal werde ich Ihnen detailliert erklären, wie Sie den $http-Dienst in AngularJS verwenden. Was sind die Vorsichtsmaßnahmen des $http-Dienstes in AngularJS? Ein praktischer Fall.

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 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 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 einer POST-Anfrage 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: Der HTTP-Statuscode

◇Header der Antwort : Diese Funktion ist eine Getter-Funktion für Header-Informationen. Sie 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) {});

第一次发送请求时，$http服务会向/api/users.json发送一个GET请求。第二次发送同一个GET请求时，$http服务会从缓存中取回请求的结果，而不会真的发送一个HTTP GET请求。
在这个例子里，由于设置了启用缓存，AngularJS默认会使用$cacheFactory,这个服务是AngularJS在启动时自动创建的。

如果想要对AngularJS使用的缓存进行更多的自定义控制，可以向请求传入一个自定义的缓存实例代替true。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

php生成随机数字、字母或数字字母混合的字符串

nginx内php动态裁剪图片步骤详解

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zur Verwendung des $http-Dienstes in AngularJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!