Cara Mengambil Data JSON POST

Pernahkah Anda ingin mengambil data post-JSON dari API mana pun? Jika ya, maka Anda beruntung. Dalam postingan blog ini, kita akan fokus pada cara mengambil data post-JSON dari API mana pun. Dengan data post-JSON, yang kami maksud adalah data yang dikirim dalam body permintaan POST.

Ini adalah cara umum untuk mengirim data ke API, terutama ketika Anda ingin membuat atau memperbarui sumber daya. Kemudian kami akan menunjukkan cara menggunakan alat sederhana dan ampuh bernama Apidog untuk melakukan hal itu.

💡

Apidog adalah alat berbasis web yang memungkinkan Anda berinteraksi dengan API mana pun dengan cara yang ramah dan intuitif. Anda dapat membuat, mengedit, dan mengirim permintaan, serta melihat respons dalam berbagai format. Anda juga dapat menyimpan permintaan Anda dan membagikannya dengan orang lain.

button

Apa itu Fetch API?

Dalam konteks JavaScript, Fetch adalah API modern untuk membuat permintaan HTTP. Ini menyediakan antarmuka yang lebih sederhana dan lebih intuitif daripada objek XMLHttpRequest yang lebih lama, dan lebih mudah digunakan.

Apa yang Dilakukan Permintaan Fetch?

Fetch API digunakan untuk membuat permintaan ke server dan menerima respons dalam format seperti JSON, XML, atau HTML.

Berikut adalah contoh cara menggunakan Fetch API untuk POST data JSON:

fetch('https://example.com/api/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    key: 'value'
  })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

Dalam contoh ini, kita mengirim permintaan POST ke https://example.com/api/data dengan payload JSON yang berisi pasangan kunci-nilai tunggal. Header Content-Type diatur ke application/json untuk menunjukkan bahwa payload dalam format JSON. Metode JSON.stringify() digunakan untuk mengonversi objek JSON menjadi string sebelum mengirimkannya di body permintaan.

Metode fetch() mengembalikan Promise yang menghasilkan objek Response yang mewakili respons terhadap permintaan. Kita kemudian dapat menggunakan metode json() dari objek Response untuk mengekstrak data JSON dari respons. Terakhir, kita mencatat data JSON ke konsol.

Data Apa yang Dapat Dilewatkan melalui Permintaan POST?

Dalam permintaan HTTP, metode POST biasanya digunakan untuk mengirim data ke server untuk membuat sumber daya baru atau memperbarui yang sudah ada. Data dapat dikirim dalam berbagai format melalui request body, dan pilihan tipe data bergantung pada persyaratan server dan sifat data yang dikirim.

Berikut adalah beberapa tipe data umum yang digunakan dalam permintaan POST:

Data Formulir:

Ini adalah tipe data yang paling umum digunakan dalam formulir web.
Data dikodekan sebagai string yang dikodekan URL, dengan pasangan kunci-nilai dipisahkan oleh = dan pasangan dipisahkan oleh &.
Contoh: name=John+Doe&email=john%40example.com
Cocok untuk sejumlah kecil data dan pasangan kunci-nilai sederhana.

JSON (JavaScript Object Notation):

JSON adalah format pertukaran data ringan yang mudah dibaca dan ditulis oleh manusia, dan mudah diuraikan dan dibuat oleh mesin.
Ini banyak digunakan dalam aplikasi web modern untuk mengirimkan data terstruktur.
Data JSON biasanya dikirim dengan header Content-Type diatur ke application/json.
Contoh: {"name": "John Doe", "email": "john@example.com"}
Cocok untuk struktur data dan API yang kompleks.

XML (Extensible Markup Language):

XML adalah bahasa markup yang digunakan untuk menyusun data.
Ini banyak digunakan di masa lalu untuk pertukaran data, tetapi penggunaannya telah menurun mendukung JSON dalam beberapa tahun terakhir.
Data XML biasanya dikirim dengan header Content-Type diatur ke application/xml atau text/xml.
Contoh:

<user>
  <name>John Doe</name>
  <email>john@example.com</email>
</user>

Masih digunakan di beberapa sistem lama dan domain tertentu.

Data Biner:

Data biner, seperti gambar, video, atau file lain, dapat dikirim dalam permintaan POST.
Data biner biasanya dikodekan menggunakan Base64 atau dikirim sebagai multipart/form-data.
Cocok untuk unggahan file atau mengirim konten biner.

Data Mentah:

Data mentah dapat dikirim dalam body permintaan tanpa pengkodean atau penataan khusus.
Header Content-Type harus diatur dengan tepat, seperti text/plain untuk data teks biasa.
Cocok untuk mengirim format data khusus atau non-standar.

Pilihan tipe data bergantung pada persyaratan server, kompleksitas data yang dikirim, dan preferensi API atau sistem yang Anda gunakan. JSON telah menjadi standar de facto untuk API web modern karena kesederhanaan, keterbacaan, dan dukungan luas di seluruh bahasa dan platform pemrograman.

Panduan: POST Data JSON Menggunakan Fetch API

Ada banyak alasan mengapa Anda mungkin ingin mengambil data post-JSON dari API mana pun. Misalnya, Anda mungkin ingin:

Menguji API yang sedang Anda kembangkan atau gunakan
Pelajari cara kerja API dan data apa yang diharapkan dan dikembalikannya
Men-debug masalah atau kesalahan dengan API
Jelajahi fitur dan kemampuan API
Integrasikan API dengan aplikasi atau proyek Anda sendiri

Apa pun alasan Anda, mengambil data post JSON dari API mana pun dapat membantu Anda mencapai tujuan Anda lebih cepat dan lebih mudah. Anda tidak perlu menulis kode apa pun, menginstal perangkat lunak apa pun, atau menyiapkan lingkungan apa pun. Anda hanya membutuhkan browser web dan koneksi internet.

Tutorial Langkah demi Langkah untuk Mengambil Data Post JSON

Sekarang kita memiliki pemahaman dasar tentang API, JSON, dan Fetch, mari selami detail tentang cara mengambil data post JSON menggunakan API.

Metode Fetch Post request JSON Data digunakan untuk mengirim objek JSON sebagai payload permintaan HTTP POST menggunakan Fetch API. Metode ini mirip dengan metode Kirim Objek JSON dengan Permintaan POST, tetapi menggunakan Fetch API untuk mengirim permintaan alih-alih objek XMLHttpRequest. Fetch API adalah cara yang lebih baru dan lebih modern untuk membuat permintaan HTTP di JavaScript, dan menyediakan antarmuka yang lebih sederhana dan lebih intuitif daripada objek XMLHttpRequest yang lebih lama. Untuk mengambil data post JSON menggunakan API, Anda perlu mengikuti langkah-langkah ini:

fetch('https://example.com/api/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    key1: 'value1',
    key2: 'value2'
  })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

Dalam contoh ini, kita mengirim permintaan POST ke https://example.com/api/data dengan payload JSON yang berisi dua pasangan kunci-nilai. Header Content-Type diatur ke application/json untuk menunjukkan bahwa payload dalam format JSON. Metode JSON.stringify() digunakan untuk mengonversi objek JSON menjadi string sebelum mengirimkannya di body permintaan.

Penanganan Kesalahan Saat Menggunakan Fetch API

Saat menggunakan Fetch API, penting untuk menangani kesalahan dengan benar untuk memastikan bahwa aplikasi Anda berperilaku seperti yang diharapkan. Berikut adalah beberapa panduan umum untuk menangani kesalahan saat menggunakan Fetch API:

Gunakan metode catch() untuk menangani kesalahan jaringan dan kesalahan lain yang mungkin terjadi selama permintaan.
Periksa properti ok dari objek respons untuk menentukan apakah permintaan berhasil atau tidak.
Gunakan properti status dari objek respons untuk menentukan kode status HTTP dari respons.
Gunakan metode json() dari objek respons untuk mengekstrak data JSON dari respons.

Berikut adalah contoh cara menangani kesalahan saat menggunakan Fetch API:

fetch('https://example.com/api/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    key: 'value'
  })
})
.then(response => {
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
})
.then(data => console.log(data))
.catch(error => console.error(error));

Metode fetch() mengembalikan Promise yang menghasilkan objek Response yang mewakili respons terhadap permintaan. Kita kemudian dapat menggunakan properti ok dari objek Response untuk memeriksa apakah permintaan berhasil atau tidak. Jika permintaan tidak berhasil, kita memunculkan kesalahan. Jika permintaan berhasil, kita menggunakan metode json() dari objek Response untuk mengekstrak data JSON dari respons. Terakhir, kita mencatat data JSON ke konsol.

Alternatif Fetch: POST data JSON Lebih Mudah dengan Apidog

Apidog adalah alat berbasis web yang membantu Anda menguji dan men-debug API. Ini memungkinkan Anda mengirim permintaan HTTP ke endpoint API mana pun dan mendapatkan respons dalam berbagai format, seperti JSON, XML, HTML, dll. Anda juga dapat memeriksa header, cookie, kode status, dan detail respons lainnya. Apidog juga memungkinkan Anda memanipulasi data respons menggunakan JavaScript, memfilter data menggunakan JSONPath, dan memvalidasi data menggunakan JSON Schema. Anda juga dapat menyimpan permintaan API Anda dan membagikannya dengan orang lain menggunakan URL unik.

Apidog adalah alat yang hebat untuk siapa saja yang bekerja dengan API, apakah Anda seorang pengembang, penguji, perancang, atau siswa. Ini membantu Anda untuk:

Pelajari cara menggunakan API yang berbeda dan jelajahi fiturnya
Uji dan debug API Anda sendiri dan temukan kesalahan dan bug
Bereksperimen dengan parameter dan opsi yang berbeda dan lihat bagaimana pengaruhnya terhadap respons
Dokumentasikan dan demonstrasikan penggunaan dan hasil API Anda
Berkolaborasi dan berkomunikasi dengan pengguna dan pengembang API lainnya

Apidog mudah digunakan, cepat, dan andal. Ini berfungsi dengan API apa pun yang mendukung permintaan HTTP, seperti RESTful, SOAP, GraphQL, dll. Ini juga mendukung berbagai metode autentikasi, seperti Basic, Bearer, OAuth, dll. Anda dapat menggunakan Apidog di perangkat dan browser apa pun, selama Anda memiliki koneksi internet.

Hasilkan Fetch Post JSON Data di Apidog

Apidog adalah platform pengembangan API kolaboratif all-in-one yang menyediakan toolkit komprehensif untuk merancang, men-debug, menguji, menerbitkan, dan mengejek API. Ini juga dapat membantu menghasilkan kode Fetch.

button

Langkah 1: Buka Apidog dan klik tombol "Permintaan Baru" untuk membuat permintaan baru.

Langkah 2: Masukkan URL endpoint API yang ingin Anda ambil data post JSON darinya dan beralih ke antarmuka Desain.

Langkah 3: Klik Hasilkan Kode Klien.

Langkah 4: Pilih kode yang ingin Anda hasilkan, dalam kasus kami adalah Fetch, Salin dan salin ke proyek Anda

POST Data JSON dari API Mana Pun Menggunakan Apidog

Untuk Menguji pengambilan data post-JSON dari API mana pun menggunakan Apidog, Anda perlu mengikuti langkah-langkah sederhana ini:

Buka Apidog dan klik tombol "Permintaan Baru" untuk membuat permintaan baru.

Pilih "POST" sebagai metode permintaan.

3. Masukkan URL endpoint API yang ingin Anda ambil data post JSON darinya. Misalnya, jika Anda ingin mengambil data post JSON dari JSON Placeholder API, yang merupakan API REST online palsu untuk pengujian dan pembuatan prototipe, Anda dapat memasukkan https://jsonplaceholder.typicode.com/posts sebagai URL.

Kemudian klik tab "Body" dan pilih "JSON" sebagai tipe body. Masukkan data post JSON yang ingin Anda kirim ke API di area teks. Misalnya, jika Anda ingin membuat postingan baru dengan JSON Placeholder API, Anda dapat memasukkan data post JSON berikut:

{
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
  }

Klik tombol "Kirim" untuk mengirim permintaan ke API dan mengambil data post JSON.

Lihat respons dari API di tab "Respons". Anda dapat melihat kode status, header, dan body respons. Anda juga dapat beralih di antara format respons yang berbeda, seperti JSON, HTML, XML, atau Raw. Misalnya, jika Anda mengambil data post JSON dari JSON Placeholder API, Anda dapat melihat respons berikut dalam format JSON:

{
    "userId": 1,
    "id": 101,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
}

Selamat! Anda telah berhasil mengambil data post JSON dari API mana pun menggunakan Apidog. Anda sekarang dapat memodifikasi, menyimpan, atau membagikan permintaan Anda sesuai keinginan.

button

Apa Manfaat Mengambil Data Post JSON Menggunakan Apidog?

Mengambil data post JSON dari API mana pun menggunakan Apidog memiliki banyak manfaat, seperti:

Mudah dan nyaman. Anda tidak perlu menulis kode apa pun, menginstal perangkat lunak apa pun, atau menyiapkan lingkungan apa pun. Anda hanya membutuhkan browser web dan koneksi internet.
Cepat dan andal. Anda dapat mengirim dan menerima permintaan dan respons dalam hitungan detik. Anda juga dapat melihat kode status, header, dan body respons dalam format yang berbeda.
Fleksibel dan serbaguna. Anda dapat mengambil data post JSON dari API mana pun, baik publik atau pribadi, sederhana atau kompleks, RESTful atau tidak. Anda juga dapat menambahkan header, parameter kueri, parameter body, dan autentikasi ke permintaan Anda.
Menyenangkan dan mendidik. Anda dapat mempelajari cara kerja API dan data apa yang diharapkan dan dikembalikannya. Anda juga dapat menjelajahi fitur dan kemampuan API. Anda juga dapat mengintegrasikan API dengan aplikasi atau proyek Anda sendiri.

Kesimpulan

Fetch API adalah antarmuka standar web untuk komunikasi HTTP di JavaScript. Dalam postingan blog ini, kita telah mempelajari cara mengambil data post-JSON dan kami memperkenalkan Apidog.

Apidog mendukung berbagai jenis permintaan, seperti GET, POST, PUT, PATCH, DELETE, dan banyak lagi. Anda juga dapat menambahkan header, parameter kueri, parameter body, dan autentikasi ke permintaan Anda. Apidog dapat menangani semua jenis data JSON, baik itu array, objek, atau struktur bersarang.

button