Call Api Menggunakan Library Axios Di React Js

Cara Menggunakan Library Axios Di React Js -  Hari ini kita akan belajar tentang library axios, axios ini berfungsi untuk melakukan package secara mudah dalam melakukan koneksi entah itu mengirim atau menerima data dari server. Lebih mudah menggunakan library ini dari pada langsung menggunakan fetch,

library ini sudah bisa mengatasi berbagai masalah yang akan terjadi pada saat pengiriman data, entah itu not found 404, 503 dan lain sebagainya. Sehingga mempermudah pekerjaan juga mempercepat pekerjaan. Oleh sebab itu simak penjelasan dibawah ini.

Pertama tama kalian harus melakukan install library tersebut. dengan cara

npm install axios

Setelah itu, import data libary diatas sendiri

1. /* Mulai Code */
2. 
   
3. import axios from 'axios';

Kode import ini digunakan untuk memanggil llibrary agar kita bisa memakainya. taruh inport tersebut diatasnya class ya seperti biasa, kumpulin import dengan yang lainya

1. /* Mulai Code */
2. 
   
3. const formData = new URLSearchParams(); 

         formData.append("value", idKey );
4. 
   
5. 
   
6. await axios.post( url, formData, {
7.             headers:{
8.                 "Forca-Token": gettokenx.token,
9.                 "Accept": "application/json",
10.                 "Content-Type": "application/x-www-form-urlencoded"
11.             }
12.         }).then(res => {
13.             console.log(res);
14.  
15.  
16.            
17.         }).catch( ( error ) => {
18.  
19.             console.log(error)
20.            
21.           });

Baik saya akan menjelaskan terkait dengan code diatas ini.

2. const formData = new URLSearchParams(); 

         formData.append("value", idKey );

Untuk kode diatas ini adalah kode yang digunakan untuk melemparkan param. seperti post atau get. fungsi tersebut nantinya digunakan untuk pelemparan data ke server. Saat ini value merupakan nama yang diterima di server, idkey tersebut juga merupakan sebuah nilai yang akan dimasukan kedalam value.

1. await axios.post( url, formData, {

Axios.post adalah merupakan function bahwa call api menggunakan method post. bukan get. pastikan penerimaan server nanti memperbolehkan menggunakan method post.

Penjelasan dari kode diatas url : itu adalah tempat untuk menaruh url api server. pasti tahukan ya. kalo bingung tanya ke bagian pengelolaan apinya.

dan untuk formData, ini adalah value param tadi 

1.  headers:{
2.                 "Forca-Token": gettokenx.token,
3.                 "Accept": "application/json",
4.                 "Content-Type": "application/x-www-form-urlencoded"
5.             }

Penjelasan dari kode diatas header, ini adalah code header yang akan dikirimkan ke server agar mau dibaca oleh server, dan server bisa menerima. Bentuk header ini juga mempunyai penjelasan. 

Forca-Token : ini merupakan token yang digunakan  validasi oleh server, apakah proses ini legal atau ilegal. Ini tidak wajib kecuali di bagian apinya memang dibutuhkan sebuah token di headernya, maka kamu harus menambahkanya.

Accept : Nah ini adalah kembalinya bentuk respond. bila saya isikan dengan application/json maka return yang diterima harus berbentuk data json. kalo selain itu akan menjadi error

Content-Type :kalo ini adalah bentuk data yang dikirim, saya mengisikan application/x-www-form-urlencoded agar data post yang saya kirimkan tersebut dapat diterima di server.Intinya ini adalah content yang akan dikirim ke server dalam bentuk apa begitu.

1.         }).then(res => {
2.             console.log(res);

Penjelasan kode diatas, adalah res, res ini adalah hasil dari return dari api yang dipanggil dan mendapatkan respond, nah respond tersebut berada pada res ini

1. }).catch( ( error ) => {
2.  
3.             console.log(error)
4.            
5.           });

Nah ini penjelasan terakhir adalah error, error ini adalah terjadi ketika proses api tersebut menjadi gagal, maka error akan tampil dan memberikan alasan kenapa kok bisa error

Dibaca baik baik dan dipraktekin semoga berhasil. goo luck.