Angular – $http
Minggu kemarin gue nulis tentang Fetch() API. Metode untuk mengambil resource / data dari URL yang diberikan. Method tersebut masih belum banyak digunakan, bahkan sangat sedikit karna baru bisa di terapkan di Chrome dan Firefox versi paling baru.
Nah, kali ini gue coba berbagi tentang $http service di Angular. Service yang fungsinya sama dengan Fetch() API atau fungsi XHR lainnya. Perbedaan yang paling menonjol adalah fungsi ini merupakan fungsi bawaan dari AngularJS dan bisa digunakan tanpa tambahan modul lainnya.
Yang berbeda selanjutnya adalah fungsi ini mempunyai chain success dan error yang sangat memudahkan coder untuk memeriksa hasil pemanggilan. Contoh paling dasar penggunaan success dan error bisa dilihat disini :
|
1 2 3 4 5 6 7 8 9 10 |
// perhatikan metode chaining success dan error $http.get('[url yang menghasilkan data]'). success(function(data, status, headers, config) { //data : berisi data yang diambil //status : status pemanggilan, apakah berhasil (200), not found (404), dll //headers : header data yang diterima }). error(function(data, status, headers, config) { }); |
Selain menggunakan chain success dan error, kita tentu masih bisa menggunakan chain then atau catch karna pada dasarnya tipe data kembalian dari $http adalah Angular Promise.
Selain method ‘get’, beberapa shortcut method dari AngularJS ini adalah
- $http.head
- $http.post
- $http.put
- $http.delete
- $http.jsonp
- $http.patch
Kita juga bisa mengatur properti pemanggilan $http secara manual, misalnya untuk menambahkan header pada pemanggilan GET atau POST. Contohnya seperti dibawah ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
var req = { method: 'POST', url: 'http://example.com', headers: { 'Content-Type': undefined }, data: { test: 'test' } } $http(req). success(function(data, status, headers, config) { }). error(function(data, status, headers, config) { }); |
Dari cukup banyak kemudahan yang disediakan, yang paling membuat gue betah pake Angular $http (instead of nambah library lain) adalah gue bisa ambil json data secara lokal dan menampilkannya di elemen html dengan mudah dan cepat. Contohnya seperti pen yang gue buat dibawah ini, pendek dan simpel, kan? 🙂
See the Pen Angular HTTP get JSON sample by Afief Yona Ramadhana (@afief) on CodePen.14290
This site uses Akismet to reduce spam. Learn how your comment data is processed.
Leave a Reply