Pengenalan kepada penggunaan perkhidmatan $http dalam AngularJS

Kami boleh menggunakan perkhidmatan $http terbina dalam untuk berkomunikasi secara langsung dengan dunia luar. Perkhidmatan $http hanya merangkum objek XMLHttpRequest asli pelayar. Seterusnya, artikel ini akan memberi anda pengenalan ringkas tentang penggunaan perkhidmatan http dalam angularjs Rakan-rakan yang menyukainya boleh merujuk kepada

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 ini ialah objek, termasuk To menjana kandungan konfigurasi 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 seperti ini:

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

Perbezaan utama antara kaedah then() dan dua kaedah lain Perbezaannya ialah ia akan menerima objek tindak balas yang lengkap, manakala kejayaan() dan ralat() akan memusnahkan objek tindak balas.

3. Dapatkan permintaan pantas

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

Kaedah get() mengembalikan objek HttpPromise.

Anda juga boleh menghantar, contohnya: delete/head/jsonp/post/put Untuk butiran tentang parameter yang boleh diterima dalam fungsi, sila rujuk halaman 148

② untuk contoh. menghantar permintaan jsonp: Untuk menghantar permintaan JSONP, di mana 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 menjadi: 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 akan ditukar kepada 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 maklumat yang akan dihantar sebagai data badan mesej kepada pelayan. 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

AngularJS dihantar ke. objek tindak balas 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 dan boleh menerima satu parameter untuk mendapatkan nama yang sepadan nilai

Contohnya, 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');
});

config

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

statusText (rentetan)

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

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

Weitere verwandte Tutorials finden Sie unter JavaScript-Grundlagen-Tutorial