AngularJS $ http dan $ resource


257

Saya memiliki beberapa layanan web yang ingin saya panggil. $resourceatau $http, yang mana yang harus saya gunakan?

$resource: https://docs.angularjs.org/api/ngResource/service/$resource

$http: https://docs.angularjs.org/api/ng/service/$http

Setelah saya membaca dua halaman API di atas saya tersesat.

Bisakah Anda jelaskan kepada saya dalam bahasa Inggris yang sederhana apa perbedaannya dan dalam situasi apa saya harus menggunakannya? Bagaimana cara menyusun panggilan ini dan membaca hasilnya menjadi objek js dengan benar?


25
$ resource dibangun di atas $ http, dan menyediakan abstraksi lebih lanjut dari komunikasi yang mendasarinya. Ini juga membutuhkan titik akhir REST yang sesuai dengan pola $ resource. Karena Anda bertanya, saran saya adalah mulai dengan $ http, berkenalan, dan kemudian lihat apakah Anda dapat beralih ke $ resource.
David Riccitelli

4
Terima kasih atas jawabannya. Jadi, dalam situasi apa $ http lebih disukai daripada sumber daya selain dari yang saya dapat kenali dengan api?
Tom

Jawaban:


168

$httpadalah untuk tujuan umum AJAX. Dalam kebanyakan kasus, inilah yang akan Anda gunakan. Dengan $httpAnda akan membuat GET, POST, DELETEjenis secara manual dan pengolahan benda mereka kembali pada Anda sendiri.

$resourcemembungkus $httpuntuk digunakan dalam skenario API web yang tenang.


Berbicara sangat umum: layanan web Sebuah tenang akan menjadi layanan dengan satu endpoint untuk tipe data yang melakukan hal yang berbeda dengan jenis data berdasarkan HTTP metode seperti GET, POST, PUT, DELETE, dll Jadi dengan $resource, Anda dapat memanggil GETuntuk mendapatkan sumber daya sebagai objek JavaScript, lalu ubah dan kirim kembali dengan POST, atau bahkan hapus dengan DELETE.

... jika itu masuk akal.


1
Jadi $ resource menangani layanan Restful, itu artinya dapat juga digunakan untuk memanggil layanan web biasa? Karena itu GET POST DELETE PUT semua itu. Jadi, dalam situasi apa $ http lebih disukai daripada $ resource?
Tom

7
Benar-benar kapan saja Anda tidak berurusan dengan titik akhir yang benar-benar tenang. Ini menambahkan banyak fungsi yang tidak Anda perlukan jika titik akhir Anda hanya mengizinkan GET, misalnya.
Ben Lesh

@blesh, sehingga menggunakan $resourcelayanan hanya akan idiomatik / baik jika Anda mendukung SISA endpoint GET, POST, dan DELETE ? Docs ( docs.angularjs.org/api/ngResource.$resource ) menunjukkan bahwa Anda mendapatkan 3 metode REST ini $resource.
Kevin Meredith

9
@KevinMeredith: Atau sejumlah metode. Anda dapat menambahkan PUTatau apa pun yang Anda inginkan GET,, POSTdan DELETEhanya default. Jika Anda memiliki titik akhir yang berhubungan dengan sumber daya yang sama (yang penting) untuk lebih dari satu metode HTTP, maka itu $resourceadalah pilihan yang baik.
Ben Lesh

Bahkan untuk titik akhir yang tenang, saya merasa nyaman menggunakan $ resource untuk data tipe GET dan QUERY. Mengingat cara .$promisekerjanya dengan baik resolveuntuk routing dan mengikat.
Kevin

210

Saya merasa bahwa jawaban lain, meskipun benar, tidak cukup menjelaskan akar pertanyaan: RESTadalah bagian dari HTTP. Ini berarti segala sesuatu yang dapat dilakukan melalui RESTdapat dilakukan melalui HTTPtetapi tidak semua yang dapat dilakukan melalui HTTPdapat dilakukan melalui REST. Itu sebabnya $resourcemenggunakan $httpinternal.

Jadi, kapan harus saling menggunakan?

Jika yang Anda butuhkan adalah REST, yaitu, Anda mencoba mengakses layanan RESTfulweb, $resourceakan membuatnya sangat mudah untuk berinteraksi dengan layanan web tersebut.

Jika sebaliknya, Anda mencoba mengakses APA SAJA yang bukan layanan RESTfulweb, Anda harus menggunakannya $http. Perlu diingat, Anda juga bisa mengakses layanan RESTfulweb via $http, itu hanya akan jauh lebih rumit daripada dengan $resource. Ini adalah cara kebanyakan orang melakukannya di luar AngularJS, dengan menggunakan jQuery.ajax(setara dengan Angular $http).


21
jawaban yang bagus, ini harus diterima, bukan yang di atas
Andrzej Rehmann

2
Itu artinya kita punya tiga cara untuk memanggil RESTful ?? Menggunakan $ resource, $ http dan jquery.ajax, apakah saya benar ??
Jake Huang

4
@JakeHuang Anda dapat memanggilnya bahkan tanpa perpustakaan, ada cara tak terbatas untuk melakukannya. Saya baru saja mengungkapkan 2 pendekatan paling populer di dunia AngularJS dan pendekatan paling umum di luarnya.
bluehallu

Bolehkah saya tahu apa 2 pendekatan paling populer di AngularJS? : p
Jake Huang

41

$httpmembuat panggilan AJAX untuk keperluan umum, di mana secara umum berarti itu bisa termasuk api tenang ditambah api tidak tenang .

dan $resourcedikhususkan untuk bagian tenang itu .

Restful Api menjadi lazim dalam beberapa tahun terakhir karena url lebih terorganisir daripada url acak yang dibuat oleh programmer.

Jika saya menggunakan RESTful API untuk membangun url, itu akan menjadi sesuatu seperti /api/cars/:carId.

$resource cara untuk mengambil data

angular.module('myApp', ['ngResource'])

    // Service
    .factory('FooService', ['$resource', function($resource) {
        return $resource('/api/cars/:carId')
    }]);

    // Controller
    .controller('MainController', ['FooService', function(FooService){
        var self = this;
        self.cars = FooService.query();
        self.myCar = FooService.get('123');

    }]);

Ini akan memberi Anda objek sumber daya , yang disertai dengan get, save, query, remove, deletemetode otomatis.

$http cara untuk mengambil data

angular.module('myApp', [])

    // Service
    .factory('FooService', ['$http', function($http){
        return {
            query: function(){
                return $http.get('/api/cars');
            },

            get: function(){
                return $http.get('/api/cars/123');
            }
            // etc...
        }

Lihat bagaimana kita perlu mendefinisikan setiap operasi umum pada RESTFul API . Juga satu perbedaan adalah yang $httpmengembalikan promisesaat $resourcemengembalikan objek. Ada juga plugin pihak ketiga untuk membantu Angular menangani RESTFul API seperti restangular


Jika API itu seperti /api/getcarsinfo. Semua yang tersisa untuk kita gunakan $http.


4
Ini harus menjadi penjawab.
Royi Namir

1
Jika api itu /api/getcarsinfosaya kira kita masih bisa menggunakan$resource
kittu

1
Ini harus menjadi penjawab. ketika Anda mengatakan "Juga satu perbedaan adalah bahwa $ http mengembalikan janji sementara $ resource mengembalikan objek" 1- apakah itu berarti saya tidak perlu menggunakan. lalu dengan $ resource? 2 - juga sebagai orang frontend dan ini mungkin terdengar konyol bagaimana saya bisa mengetahui apakah api itu tenang atau tidak? terima kasih
shireef khatab

1
@shireefkhatab 1. ya, $ resource hanyalah abstraksi level yang lebih tinggi dari $ http untuk RESTFul API connivence. Contoh dokumen menunjukkan cara menggunakannya. 2. Ini benar-benar tergantung bagaimana pria backend Anda mendesain url. Jika dia ingin menyesuaikan diri dengan paradigma RESTFul api, maka Anda baik untuk pergi
Qiang

30

Saya pikir jawabannya lebih tergantung pada siapa Anda pada saat Anda menulis kode. Gunakan $httpjika Anda baru di Angular, sampai Anda tahu mengapa Anda perlu $resource. Sampai Anda memiliki pengalaman nyata tentang bagaimana $httpmenahan Anda, dan Anda memahami implikasi penggunaan $resourcedalam kode Anda , tetaplah dengan $http.

Ini adalah pengalaman saya: Saya memulai proyek Angular pertama saya, saya perlu membuat permintaan HTTP ke antarmuka RESTful, jadi saya melakukan penelitian yang sama dengan yang Anda lakukan sekarang. Berdasarkan diskusi yang saya baca di SO pertanyaan seperti ini, saya memilih untuk ikut $resource. Ini adalah kesalahan yang saya harap bisa saya batalkan. Inilah alasannya:

  1. $httpContohnya banyak, membantu, dan umumnya hanya apa yang Anda butuhkan. Jelas $resourcecontoh yang langka, dan (dalam pengalaman saya) jarang semua yang Anda butuhkan. Untuk pemula Angular, Anda tidak akan menyadari implikasi pilihan Anda sampai nanti, ketika Anda terjebak bingung dengan dokumentasi dan marah karena Anda tidak dapat menemukan $resourcecontoh-contoh bermanfaat untuk membantu Anda.
  2. $httpmungkin adalah peta mental 1-ke-1 untuk apa yang Anda cari. Anda tidak perlu mempelajari konsep baru untuk memahami apa yang Anda dapatkan $http. $resourcemembawa banyak nuansa bahwa Anda belum memiliki peta mental untuk saat ini.
  3. Ups, apa saya bilang Anda tidak perlu belajar konsep baru? Sebagai pemula sudut Anda lakukan harus belajar tentang janji-janji. $httpmengembalikan janji dan .thenmampu, sehingga cocok dengan hal-hal baru yang Anda pelajari tentang Angular dan janji. $resource, yang tidak mengembalikan janji secara langsung, mempersulit pemahaman tentatif Anda pada fundamental Angular.
  4. $resourcesangat kuat karena memadatkan kode untuk panggilan CRUD tenang dan transformasi untuk input dan output. Itu bagus jika Anda muak menulis kode berulang kali untuk memproses hasil $httpdiri Anda sendiri. Untuk orang lain, $resourcetambahkan lapisan sintaksis dan parameter yang lewat yang membingungkan.

Seandainya saya mengenal saya 3 bulan lalu, dan saya akan dengan tegas mengatakan pada diri sendiri: "Tetaplah dengan $httpanak kecil. Tidak apa-apa."


1
Saya suka jawaban Anda, terutama baris terakhir. Saat ini saya sedang mengalami pergeseran dalam menggunakan $ resource vs $ http. Satu hal yang saya juga tambahkan adalah bahwa $ resource benar-benar hanya berguna dan benar-benar membantu ketika Anda menggunakan kata benda API yang sama , suka /user/:userIdatau /thing. Setelah Anda pindah ke /users/roles/:roleIdmaka Anda harus memodifikasi $ sumber url dan params pada basis per kata kerja dan Anda mungkin juga menggunakan $ http pada saat itu.
coblr

3
Panggil saya penderita skizofrenia untuk mengomentari jawaban saya sendiri, tetapi saya pikir saya akan menyebutkan pengalaman yang lebih baru. Saya telah refactoring untuk menghilangkan $resourcedan beralih ke $httptempat. Saya tidak bisa cukup menekankan betapa saya berharap dan berharap saya belum pernah bertemu $resource. Saya mungkin telah membuang lebih dari seminggu mengejar nuansa $resourceselama berbulan-bulan. $httpsangat mudah dan langsung, setiap keuntungan yang bisa didapat $resourcetelah terhapus secara menyeluruh oleh kurva belajar.
Matius Marichiba

24

Saya pikir penting untuk menekankan bahwa $ resource mengharapkan objek atau array sebagai respons dari server, bukan string mentah. Jadi jika Anda memiliki string mentah (atau apa pun kecuali objek dan array) sebagai respons, Anda harus menggunakan $ http


Apakah itu berarti $ http tidak mendukung objek dan array? Hanya ingin mengklarifikasi.
Shardul

Saya percaya $ http mendukung objek, array, dan string - saya perlu konfirmasi untuk itu
Katana24

@ Shardul, saya mengerti bahwa $ http berkaitan dengan segala jenis respon tetapi $ resource hanya berurusan dengan objek dan array.
shireef khatab

Tidak benar, Anda masih dapat menggunakan $ resource untuk mengembalikan sebuah String. Gunakan 'transformResponse' dalam kode frontend Anda untuk membungkus String yang dikembalikan dalam suatu objek.
Terry Deng

7

Ketika datang untuk memilih antara $httpatau $resourceberbicara secara teknis tidak ada jawaban benar atau salah pada dasarnya keduanya akan melakukan hal yang sama.

Tujuannya $resourceadalah untuk memungkinkan Anda meneruskan string template (string yang berisi placeholder) bersama dengan nilai parameter. $resourceakan mengganti placeholder dari string template dengan nilai parameter yang dilewatkan sebagai objek. Ini sebagian besar berguna ketika berinteraksi dengan sumber data RESTFul karena mereka menggunakan prinsip serupa untuk mendefinisikan URL.

Apa yang $httpdilakukan adalah melakukan Permintaan HTTP Asinkron.


1
Ini adalah jawaban yang bagus karena menunjukkan bahwa $ http adalah yang memberdayakan permintaan dari $ resource, dan yang pada dasarnya melakukan hal yang sama.
coblr

@ Dalzo Jadi maksud Anda mengatakan $resourcetidak dapat melakukan Asynchronous? Hanya ingin mengklarifikasi
kittu

Tidak, yang saya tunjukkan adalah bahwa pada akhirnya $httpadalah cara paling sederhana untuk melakukan Permintaan HTTP Asinkron dan apa yang $resourcepada dasarnya melakukan hal yang sama tetapi dengan parameter yang berbeda
Dalorzo

2

layanan sumber daya hanyalah layanan yang berguna untuk bekerja dengan REST APSI. ketika Anda menggunakannya, Anda tidak menulis metode CRUD Anda (membuat, membaca, memperbarui, dan menghapus)

Sejauh yang saya lihat, layanan sumber daya hanyalah jalan pintas, Anda dapat melakukan apa saja dengan layanan http.


Saya tidak yakin akan mengklasifikasikan $ resource sebagai pintasan. Ini adalah pembungkus untuk $ http, jadi menggunakan $ http secara langsung akan menjadi "lebih pendek". Ini adalah cara bagi Anda untuk mengkonfigurasi $ http sehingga Anda memiliki kode yang berpotensi lebih sedikit ketika menggunakan $ http. Dalam satu kasus $http.get('/path/to/thing', params)versus myResource.get(params)plus sebenarnya melakukan konfigurasi untuk myResource. Lebih banyak kode di depan dan hanya benar-benar berfungsi dengan baik dengan kata benda API yang sama . Kalau tidak, Anda mengkode sama seperti jika Anda menggunakan $ http.
coblr

2

Satu hal yang saya perhatikan ketika menggunakan $ resource lebih dari $ http adalah jika Anda menggunakan Web API di .net

$ resource diikat menjadi satu pengontrol yang mengeksekusi satu tujuan.

$ resource ('/ user /: userId', {userId: '@ id'});

[HttpGet]
public bool Get(int id)
{
    return "value"
}

public void Post([FromBody]string value)
{
}

public void Put(int id, [FromBody]string value)
{
}

public void Delete(int id)
{
}

Sedangkan $ http bisa berupa apa saja. tentukan url saja.

$ http.get - "api / otentikasi"

[HttpGet]
public bool Authenticate(string email, string password)
{
    return _authenticationService.LogIn(email, password, false);
}

itu hanya pendapat saya.


0

Layanan $ resource saat ini tidak mendukung janji dan oleh karena itu memiliki antarmuka yang berbeda dengan layanan $ http.


1
Layanan $ resource memang mendukung janji, tetapi tidak mengembalikan $ menjanjikan secara langsung seperti $ http. Anda harus melakukannya seperti var myResource = $resource(...config...);saat itu di tempat lain dalam layanan yang Anda lakukan return myResource.get(..params...)atau dapat Anda lakukanvar save = myResource.save(); save.$promise.then(...fn...); return save;
coblr
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.