Pengenalan kepada penggunaan perkhidmatan $http dalam AngularJS_AngularJS

Kami boleh menggunakan perkhidmatan $http terbina dalam untuk berkomunikasi secara langsung dengan dunia luar. Perkhidmatan $http hanya merangkum objek XMLHttpRequest asli pelayar.

1. Panggilan berantai

Perkhidmatan $http ialah fungsi yang hanya boleh menerima satu parameter Parameter ini ialah objek yang mengandungi kandungan konfigurasi yang digunakan untuk menjana permintaan HTTP. Fungsi ini mengembalikan objek janji dengan dua kaedah: kejayaan dan ralat.

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

2 Kembalikan objek janji

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

Memandangkan kaedah $http mengembalikan objek janji, kami boleh menggunakan kaedah kemudian untuk mengendalikan panggilan balik apabila respons kembali. Jika anda menggunakan kaedah itu, anda akan mendapat parameter khas, yang mewakili maklumat kejayaan atau kegagalan objek yang sepadan, dan juga boleh menerima dua fungsi pilihan sebagai parameter. Atau anda boleh menggunakan panggilan balik kejayaan dan ralat.

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

Atau ini:

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

Perbezaan utama antara kaedah

then() dan dua kaedah lain ialah ia akan menerima objek respons yang lengkap, manakala success() dan error() akan memusnahkan objek respons.

3. Cepat dapatkan permintaan

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

Kaedah get() mengembalikan objek HttpPromise.

Anda juga boleh menghantar, contohnya: delete/head/jsonp/post/put Sila rujuk halaman 148 untuk parameter tertentu yang boleh diterima dalam fungsi

② Ambil contoh menghantar permintaan jsonp sekali lagi: Untuk menghantar permintaan JSONP, url mesti mengandungi perkataan JSON_CALLBACK.

jsonp(url,config) dengan konfigurasi adalah pilihan

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

4. Anda juga boleh menggunakan $http sebagai fungsi Dalam kes ini, anda perlu memasukkan objek tetapan untuk menerangkan cara membina objek XHR.

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

Objek tetapan boleh mengandungi kekunci utama berikut:

①kaedah

Boleh: GET/DELETE/HEAD/JSONP/POST/PUT

②url: sasaran permintaan mutlak atau relatif
③params (peta rentetan atau objek)
Nilai kunci ini ialah peta rentetan atau objek, yang akan ditukar menjadi rentetan pertanyaan dan dilampirkan pada URL. Jika nilai itu bukan rentetan, ia akan bersiri JSON.
Contohnya:

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

④data (rentetan atau objek)

Objek ini mengandungi data yang akan dihantar ke pelayan sebagai badan mesej. Biasanya digunakan semasa menghantar permintaan POST.

Bermula dari AngularJS 1.3, ia juga boleh menghantar data binari dalam permintaan POST. Untuk menghantar objek gumpalan, anda boleh menghantarnya dengan menggunakan parameter data.
Contohnya:

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

4. Objek respons

Objek tindak balas yang diluluskan oleh AngularJS kepada kaedah then() mengandungi empat sifat.

data

Data ini mewakili badan tindak balas yang ditukar (jika penukaran ditakrifkan)

status

Kod status HTTP respons

pengepala

Fungsi ini ialah fungsi pengumpul maklumat pengepala, yang boleh menerima satu parameter untuk mendapatkan nilai nama yang sepadan

Sebagai contoh, gunakan kod berikut untuk mendapatkan nilai X-Auth-ID:

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

konfigurasi

Objek ini ialah objek tetapan lengkap yang digunakan untuk menjana permintaan asal.

statusTeks(String)

Rentetan ini ialah teks status HTTP bagi respons.

5. Mencache permintaan HTTP

Secara lalai, perkhidmatan $http tidak cache permintaan secara setempat. Apabila membuat permintaan individu, kami boleh mendayakan caching dengan menghantar nilai boolean atau contoh cache kepada permintaan $http.

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

Kali pertama permintaan dihantar, perkhidmatan $http akan menghantar permintaan GET ke /api/users.json. Apabila permintaan GET yang sama dihantar untuk kali kedua, perkhidmatan $http akan mendapatkan semula hasil permintaan daripada cache tanpa benar-benar menghantar permintaan HTTP GET.

Dalam contoh ini, kerana caching didayakan, AngularJS akan menggunakan $cacheFactory secara lalai Perkhidmatan ini dibuat secara automatik oleh AngularJS apabila ia bermula.

Jika anda mahukan lebih kawalan tersuai ke atas cache yang digunakan oleh AngularJS, anda boleh menghantar contoh cache tersuai kepada permintaan dan bukannya benar.

Izinkan saya memberitahu anda tentang pengetahuan $http AngularJS.

AngularJS $http ialah perkhidmatan untuk membaca data pada pelayan web.

$http.get(url) ialah fungsi yang digunakan untuk membaca data pelayan.

Contoh AngularJS

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