Consuming REST API with React

InsyaAllah pada catatan kita akan belakar bagaimana membuat asynchornous code yang lebih bersih dan mudah dibaca. Lalu akan membahas tentang networking, kita akan gunakan pustaka fetch dan axios.

Berkaitan dengan membuat dan mengirim request serta menerima respone, cara tradisional adalah menggunakan XMLHttpRequest. Namun tidak akan dibahas pada catatan ini. Anda dapat mencarinya di GOOGLEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE

Using the axios

Pertama install axios melalui npm

npm install axios

Selanjutnya untuk menggunakan import axios dengan syntax berikut

import axios from 'axios';

Axios library memiliki beberapa manfaat, seperti transforasi otomatis untuk data JSON. Dibawah ini adalah contoh request menggunakan axios

Code

contoh

axios.get('http://someapi.com')
.then(response => console.log(response))
.catch(error => console.log(error));

Pustakan axios juga memliki beberapa HTTP method tersendiri. Contohnyam jika kita ingin mengirim request POST serta data object pada body kita dapat menggunakan kurleb kode dibawah ini.

Code

contoh

axios.post('http://someapi.com', { newObject })
.then(response => console.log(response))
.catch(error => console.log(error));

Note

Dokumentasi configurasi axios

---

sample

Code

ropsAndState/LearnState.js

Output

Code

Example.jsExample.js

Code

Example 1Example 2

Output

Output