Membuat panggilan API dalam VS Code sangatlah mudah, cukup instal satu ekstensi, lalu Anda tidak perlu bergantung pada alat eksternal apa pun untuk menyelesaikan pekerjaan.

Selama pengembangan, Anda biasanya membuat permintaan ke API. Ini bisa ke beberapa API eksternal atau API server backend Anda sendiri.

Anda dapat menggunakan alat pihak ketiga seperti Postman untuk melakukan panggilan API Anda. Tetapi ekstensi Kode VS memungkinkan Anda melakukan panggilan API langsung dari dalam Kode VS. Di sini, Anda akan mempelajari cara melakukan permintaan API di VS Code.

Ekstensi Klien VS Code REST

Ekstensi dalam VS Code adalah plugin atau add-on yang meningkatkan fungsionalitas editor Visual Studio Code. Pasar ekstensi VS Code menyediakan beberapa jenis ekstensi yang dapat membantu tugas pemrograman Anda. Ada ekstensi untuk menambahkan dukungan bahasa. Ada satu untuk menyediakan pelengkapan otomatis untuk bahasa pemrograman tertentu dan seterusnya. Ekstensi membuatnya lebih mudah untuk memprogram dengan VS Code.

instagram viewer

Ekstensi REST Client memungkinkan Anda untuk mengeksekusi permintaan API dari dalam VS Code. Ekstensi menyertakan editor REST API, antarmuka visual yang memungkinkan Anda membuat kueri titik akhir API. Itu menerima tajuk khusus, parameter kueri, dan beberapa parameter lainnya.

Untuk menginstal Klien REST, buka VS Code dan klik Ekstensi tab. Pencarian untuk Klien REST dan klik Install tombol untuk menambahkannya ke Kode VS.

Di bawah Detail tab, Anda akan menemukan tutorial bermanfaat tentang cara menggunakan klien untuk membuat permintaan API. Mari kita lihat empat jenis permintaan umum dan cara membuatnya menggunakan ekstensi REST Client.

Kami akan menggunakan JSONPlaceholder untuk mendemonstrasikan membuat panggilan API menggunakan ekstensi REST Client. Ini menyediakan enam sumber daya umum yang dapat Anda baca, edit, perbarui, atau hapus dengan membuat permintaan API.

Membuat Permintaan GET Menggunakan Ekstensi Klien REST

Mulailah dengan membuat a .http untuk permintaan API Anda. Anda dapat menamai file tersebut myrequests.http.

Tambahkan kode berikut ke myrequests.http file untuk mengambil sumber daya dari JSONPlaceholder API yang memiliki 1 sebagai ID-nya:

MENDAPATKAN https://jsonplaceholder.typicode.com/posts/1 HTTP/1.1

Untuk mengirim permintaan, klik Kirim Permintaan tombol yang muncul di bagian atas file. Jendela baru akan terbuka yang berisi detail respons.

Inilah cara Anda membuat permintaan GET di dalam VS Code.

Membuat Permintaan POST Menggunakan Ekstensi Klien REST

Anda membuat permintaan POST saat ingin mengirim data ke server, biasanya untuk membuat sumber daya baru.

Untuk membuat resource baru di JSONPlaceholder API, ganti kode di myrequests.http berkas dengan berikut ini:

POS https://jsonplaceholder.typicode.com/posts HTTP/1.1
Jenis Konten: "application/json"
{
 "judul": "foo",
 "tubuh": "batang",
 "userId": 1
}

Klik Kirim Permintaan tombol untuk mengirim permintaan. Sekali lagi, ini akan membuka jendela baru yang berisi data respons. Respon tersebut menunjukkan sebuah HTTP/1.1 201 Dibuat pesan dan ID kiriman beserta data lainnya jika panggilan API berhasil.

{
 "id": "101"
}

Membuat Permintaan PUT Menggunakan Ekstensi Klien REST

Anda membuat permintaan PUT saat ingin memperbarui data di server.

Untuk memperbarui sumber daya yang ada di API JSONPlaceholder, ganti kode di file myrequests.http berkas dengan berikut ini:

MELETAKKAN https://jsonplaceholder.typicode.com/posts/1 HTTP/1.1
Jenis Konten: "application/json"
{
 "judul": "foo baru",
 "body": "bilah baru",
 "userId": 1
}

Setelah mengirimkan permintaan, sumber daya akan diperbarui di server tiruan dan Anda akan mendapatkan HTTP/1.1 200 oke pesan.

Membuat Permintaan PATCH Menggunakan Ekstensi Klien REST

Anda membuat permintaan PATCH saat Anda ingin mengubah bidang atau properti tertentu dari sumber daya tertentu di server.

Untuk hanya memperbarui judul sumber daya yang ada di server tiruan, ganti kode di myrequests.http berkas dengan berikut ini:

https://jsonplaceholder.typicode.com/posts/1 HTTP/1.1 
Jenis Konten: "application/json"
{
 "title": "foo lain"
}

Setelah Anda membuat permintaan, judul sumber daya akan diperbarui di server tiruan dan Anda akan mendapatkan HTTP/1.1 200 oke pesan bersama dengan data lain dari sumber daya.

Membuat Permintaan HAPUS Menggunakan Ekstensi Klien REST

Anda membuat permintaan DELETE saat Anda ingin menghapus sumber daya di server.

Untuk menghapus sumber daya yang ada di server tiruan, ganti kode di Anda myrequests.http berkas dengan berikut ini:

MENGHAPUS https://jsonplaceholder.typicode.com/posts/1 HTTP/1.1

Di sini, Jenis konten tidak diperlukan, begitu pula objek datanya. Jika Anda mengirim permintaan dan berhasil menghapus sumber daya, Anda akan mendapatkan HTTP/1.1 200 oke respon dengan objek kosong.

Lakukan Panggilan API Langsung Dari Dalam Kode VS

Sebelumnya, Anda mungkin pernah menggunakan alat pihak ketiga seperti Tukang pos untuk membuat permintaan API. Meskipun alat ini berfungsi dengan baik, perlu waktu untuk menyiapkannya. Misalnya, Anda harus memiliki akun di Postman untuk menggunakan API explorer.

Meskipun ada beberapa alat pengujian API online, tetapi dengan ekstensi seperti REST Client, pengujian API jauh lebih cepat dan mudah. Anda dapat menguji API apa pun langsung dari dalam editor VS Code Anda. Ini sangat berguna jika Anda sedang mengembangkan API secara lokal dan ingin menguji API lokal Anda dengan cepat.

Ekstensi Pengujian VS Kode API Lainnya

Rest Client mudah digunakan. Tapi, itu bukan satu-satunya ekstensi Kode VS untuk menguji API. Opsi populer lainnya adalah Thunder Client, httpYak, dan httpBook.

Thunder Client menyediakan editor API visual untuk menyederhanakan permintaan API. Tentu saja, Anda perlu mengetahui apa itu REST API untuk menggunakan alat ini.