BODY REQUEST NODEJS

Body Request

Dalam kebanyakan kasus, ketika client melakukan permintaan dengan metode POST atau PUT, permintaan tersebut memiliki data yang disimpan pada body request. Data tersebut dapat berupa format teks, JSON, berkas gambar, atau format lainnya, dan kemudian diproses oleh server untuk disimpan dalam bentuk objek utuh atau diproses di database.

resource image: https://support.huaweicloud.com/intl/en-us/api-sis/sis_03_0057.html

Ketahuilah bahwa http.clientRequest merupakan turunan dari readable stream, sehingga mendapatkan data body sedikit lebih sulit daripada mendapatkan data header. Data di body didapatkan dengan teknik stream, seperti yang sudah kita ketahui, teknik ini memanfaatkan EventEmitter untuk mengirimkan bagian-bagian datanya. Dalam kasus http.clientRequest event data dan end-lah yang digunakan untuk mendapatkan data body.

Berikut adalah contoh bagaimana mendapatkan data body:

const requestListener = (request, response) => {
    let body = [];
 
    request.on('data', (chunk) => {
        body.push(chunk);
    });
 
    request.on('end', () => {
        body = Buffer.concat(body).toString();
    });
};

Mari kita bedah kodenya.

1. Pertama, kita deklarasikan variabel body dan inisialisasikan nilainya dengan array kosong. Ini berfungsi untuk menampung buffer pada stream. 

2. Lalu, ketika event data terjadi pada request, kita isi array body dengan chunk (potongan data) yang dibawa callback function pada event tersebut.

3. Terakhir, ketika proses stream berakhir, maka event end akan terbangkitkan. Di sinilah kita mengubah variabel body yang sebelumnya menampung buffer menjadi data sebenarnya dalam bentuk string melalui perintah Buffer.concat(body).toString().

Huft! Mendapatkan data melalui teknik stream cukup menyiksa. Untuk meningkatkan pemahaman, mari kita praktikkan proyek web server sebelumnya.

Latihan Mendapatkan Body Request 

Di latihan sebelumnya, web server yang kita buat berhasil meresponse sesuai request method yang dilakukan client. That's nice! 

Di latihan kali ini, kita akan mencoba mendapatkan data pada body request ketika client menggunakan method POST. 

Buatlah web server merespons permintaan method POST dengan menampilkan sapaan dan nama berdasarkan data body yang dikirim oleh client. Bila client mengirimkan nama “Studyinfostudy”, maka respons akan menampilkan “Hai, Studyinfostudy!”.  

Client akan mengirimkan data nama tersebut menggunakan format JSON seperti ini:

{ "name": "Studyinfostudy" }

Namun, sebelum kita memulai latihan, kita harus menghapus logika method seperti PUT dan DELETE yang tidak kita butuhkan untuk mendapatkan data pada body.

Jadi, silakan buka berkas server.js pada proyek nodejs-web-server dan hapuslah logika method PUT dan DELETE. Sehingga, berkas server.js tampak lebih ringkas seperti ini:

const http = require('http');
 
const requestListener = (request, response) => {
    response.setHeader('Content-Type', 'text/html');
    response.statusCode = 200;
 
    const { method } = request;
 
    if(method === 'GET') {
        response.end('<h1>Hello!</h1>');
    }
 
    if(method === 'POST') {
        response.end('<h1>Hai!</h1>');
    }
};
 
const server = http.createServer(requestListener);
 
const port = 5000;
const host = 'localhost';
 
server.listen(port, host, () => {
    console.log(`Server berjalan pada http://${host}:${port}`);
});

Selanjutnya, kita bisa mulai menuliskan logika stream di dalam blok POST.

if(method === 'POST') {
  let body = [];
    
  request.on('data', (chunk) => {
      body.push(chunk);
  });
 
  request.on('end', () => {
      body = Buffer.concat(body).toString();
      response.end(`<h1>Hai, ${body}!</h1>`);
  });
}

Perhatikan kode di atas! Kita memindahkan proses respons di dalam callback event end. Hal ini diperlukan karena data body siap dikonsumsi hanya ketika event end telah dibangkitkan. Dalam arti lain, server tidak akan mengirimkan respons bila proses stream belum selesai.

Simpan perubahan pada berkas server.js; jalankan ulang server dengan perintah npm run start; dan coba lakukan permintaan ke server dengan menggunakan method POST melalui cURL seperti ini:

curl -X POST -H "Content-Type: application/json" http://localhost:5000 -d "{\"name\": \"Studyinfostudy\"}"

Server akan menanggapi dengan hasil berikut:

<h1>Hai, {"name": "Studyinfostudy"}!</h1>

Tunggu, ini bukan hasil yang kita harapkan. Body masih bernilai data string JSON. Data ini masih perlu kita olah lagi agar bisa mendapatkan nilai name yang sebenarnya. Gunakanlah JSON.parse() untuk mengubah JSON string menjadi JavaScript objek. Sesuaikan kembali kode pada blok POST menjadi seperti ini (lihat kode yang ditebalkan):

if(method === 'POST') {
  let body = [];
 
  request.on('data', (chunk) => {
    body.push(chunk);
  });
 
  request.on('end', () => {
    body = Buffer.concat(body).toString();
    const { name } = JSON.parse(body);
    response.end(`<h1>Hai, ${name}!</h1>`);
  });
}

Simpan perubahan pada berkas server.js; jalankan ulang server dengan perintah npm run start; dan coba lagi lakukan permintaan ke server dengan menggunakan method POST.

curl -X POST -H "Content-Type: application/json" http://localhost:5000 -d "{\"name\": \"Studyinfostudy\"}"

maka output-nya akan:

<h1>Hai, Studyinfostudy!</h1>

Voila! Inilah hasil yang kita harapkan! Kita bisa kirimkan permintaan POST lain dengan data nama sendiri. Cobalah, apakah hasilnya sesuai atau tidak?

curl -X POST -H "Content-Type: application/json" http://localhost:5000 -d "{"name": "Dimas"}"
 
// output: <h1>Hai, Dimas!</h1>