DIPI

Untuk pertama kalinya aku baru menyadari jika body request POST PUT pada API bisa berubah-ubah tergantung kebutuhan data yang diminta. Ini terkonfirmasi pada saat aku mengerjakan project akhir bootcamp skilvul. Pada project ini, temanku Dea Anggita sebagai backend membuatkan API doc. yang sangat memudahkanku yang berperan sebagai frontend. Nyatanya dari API doc. ini, aku belajar banyak hal dan membuka puzzle-puzzle yang belum aku tau. Jadi, pada tulisan ini, aku akan mencoba menjelaskan type body request form-data dan raw JSON.

Body : form-data

Tanpa melihat dokumentasi resminya dan hanya melihat tampilan dari postman sudah kuduga ini digunakan untuk multi type data. Maksudnya dalam sekali request, data yang diminta bisa 2 jenis yaitu type file dan text, lebih lengkap penjelasan resminya ada disini.

Untuk penggunaaan pada API documentasi sudah diberikan contohnya, sangat membantu sekali. Ini adalah cara penggunaannya menurut documentasinya :

var myHeaders = new Headers();
myHeaders.append("Authorization", "eyJh.....TNuQAakc");

var formdata = new FormData();
formdata.append("file", fileInput.files[0], "1eeb...e81b2");
formdata.append("bio", "tes");
formdata.append("location", "testes");
formdata.append("address", "djfhksjdf");
formdata.append("phone", "83483245");

var requestOptions = {
  method: 'PUT',
  headers: myHeaders,
  body: formdata,
  redirect: 'follow'
};

fetch("{{url}}/users", requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));

Untuk pertama kalinya saya baru mengetahui cara penggunaan FormData(). Contoh yang ada ini juga sesuai dengan documentasi resmi dari MDN tentang FormData

FormData() memiliki sintak seperti ini :

new FormData()
new FormData(form)
new FormData(form, submitter)

⚠️ : nama (form,…) tidak boleh asal, tapi harus sesuai dengan code backand. untuk submitter diisi sesuai dengan data yang akan di terima. Parameter ke-3 adalah fileName, opsional namun lebih baik diisi apabila valuenya berupa file.

Body : raw JSON

Untuk raw JSON, body requestnya berbentuk object string. Lalu bagaimana jika ingin mengirimkan file dengan raw JSON, jawabannya tidak bisa, namun jika mengirimkan berupa URL yang menampilkan data tersebut, maka raw JSON bisa menerimanya. Contohnya seperti ini :

Pada contoh, request body meminta URL image dan video yang bisa langsung ditampilkan, API ini akan berjalan setelah upload image dan video yang responnya berupa URL telah selesai. Antara backend dan frontend sepakat untuk melakukan upload file dulu, kemudian memasukan respon upload file yang berupa string URL ke dalam respon API ini.

Cara ini dilakukan agar didalam database tidak menyimpan file ukuran besar dalam hal ini adalah video.

Kesimpulan

Perbedaan form-data dan raw JSON terletak pada struktur data yang dikirim. Form-data digunakan untuk mengirimkan multi type data, sedangkan raw JSON untuk mengirimkan type data yang sama (object string).

Selain itu dari sisi frontend yang bertugas mengirimkan data, terdapat perbedaan cara eksekusinya. Form-data menggunakan FormData(), sedangkan raw JSON harus berupa object string atau menggunakan JSON.stringify() untuk memastikan body raw JSON bisa terima.

Kesamaan dari keduanya adalah, semua data harus terisi, apabila ada yang kosong atau tidak terisi, API akan menolaknya. Namun hal ini bisa diatur pada sisi backend apakah saat melakukan POST PUT data boleh null atau tidak.