Saya baru mengenal ReactJS dan UI dan saya ingin tahu cara membuat panggilan POST sederhana berbasis REST dari kode ReactJS.
Jika ada contoh yang hadir, itu akan sangat membantu.
Saya baru mengenal ReactJS dan UI dan saya ingin tahu cara membuat panggilan POST sederhana berbasis REST dari kode ReactJS.
Jika ada contoh yang hadir, itu akan sangat membantu.
Jawaban:
Langsung dari React docs :
(Ini memposting JSON, tetapi Anda juga bisa melakukan, misalnya, bentuk multi-bagian.)
sumber
fetch()
fungsinya tidak mengembalikan data , itu hanya mengembalikan janji .fetch
dibangun ke Bereaksi, yang bukan, dan tidak ada tautan ke dokumen yang dirujuk.fetch
adalah (pada saat penulisan) API berbasis Janji eksperimental . Untuk kompatibilitas browser, Anda memerlukan babel polyfill .Bereaksi tidak benar-benar memiliki pendapat tentang bagaimana Anda membuat panggilan REST. Pada dasarnya Anda dapat memilih perpustakaan AJAX apa pun yang Anda suka untuk tugas ini.
Cara termudah dengan JavaScript lama mungkin adalah sesuatu seperti ini:
Di browser modern, Anda juga dapat menggunakan
fetch
.Jika Anda memiliki lebih banyak komponen yang membuat panggilan REST mungkin masuk akal untuk menempatkan logika semacam ini di kelas yang dapat digunakan di seluruh komponen. Misalnya
RESTClient.post(…)
sumber
fetch
atausuperagent
ataujQuery
atauaxios
atau sesuatu yang lain yang bukan merupakan bagian dari "vanili Bereaksi" untuk melakukan apa pun selain apa yang diposting di atas .JSON.stringify({"key": "val"})
dan kemudian di sisi labu lakukanrequest.get_json()
JSON.stringify
terlebih dahulu.Paket lain yang populer baru-baru ini adalah: axios
Install :
npm install axios --save
Permintaan berbasis Janji sederhana
sumber
Anda dapat menginstal superagent
kemudian untuk melakukan panggilan pos ke server
sumber
Pada 2018 dan selanjutnya, Anda memiliki opsi yang lebih modern yaitu menggabungkan async / menunggu dalam aplikasi ReactJS Anda. Pustaka klien HTTP berbasis janji seperti aksioma dapat digunakan. Kode sampel diberikan di bawah ini:
sumber
await
-SyntaxError: await is a reserved word (33:19)
Saya pikir cara ini juga cara yang normal. Tapi maaf, saya tidak bisa menjelaskan dalam bahasa Inggris ((
https://googlechrome.github.io/samples/fetch-api/fetch-post.html
fetch ('url / question', {metode: 'POST', tajuk: {Terima: 'application / json', 'Tipe-Konten': 'application / json',}, badan: JSON.stringify (this.state) }). kemudian (response => {console.log (response)}) .catch (error => {console.log (error)})
sumber
Berikut adalah daftar perbandingan pustaka ajax berdasarkan fitur dan dukungan. Saya lebih suka menggunakan fetch hanya untuk pengembangan sisi klien atau isomorfik untuk digunakan pada pengembangan sisi klien dan server.
Untuk informasi lebih lanjut tentang isomorfik-fetch vs fetch
sumber
Berikut adalah fungsi util yang dimodifikasi (posting lain di stack) untuk mendapatkan dan memposting keduanya. Buat file Util.js.
Penggunaan seperti di bawah ini di komponen lain
sumber
Berikut ini sebuah contoh: https://jsfiddle.net/69z2wepo/9888/
Ini menggunakan
jquery.ajax
metode tetapi Anda dapat dengan mudah menggantinya dengan lib berbasis AJAX seperti aksioma, superagent atau fetch.sumber
'{"Id":"112","User":"xyz"}'
dan ubah URL ke localhost: 8080 / myapi / ui / start, itu saja, begitu panggilan XHR berhasil Anda akan mendarat di dalam metode yang dilakukan dan Anda akan memiliki akses ke data Anda melalui hasilnya Properti.