Panduan praktis ES6 tentang cara melakukan permintaan HTTP menggunakan Fetch API

Dalam panduan ini, saya akan menunjukkan kepada Anda cara menggunakan Fetch API (ES6 +) untuk melakukan permintaan HTTP ke REST API dengan beberapa contoh praktis yang kemungkinan besar akan Anda temui.

Ingin segera melihat contoh HTTP? Pergi ke bagian 5. Bagian pertama menjelaskan bagian asynchronous dari JavaScript saat bekerja dengan permintaan HTTP.

Catatan : Semua contoh ditulis dalam ES6 dengan fungsi panah.

Pola umum dalam aplikasi web / seluler saat ini adalah meminta atau menampilkan beberapa jenis data dari server (seperti pengguna, posting, komentar, langganan, pembayaran, dan sebagainya) dan kemudian memanipulasinya dengan menggunakan CRUD (buat, baca, perbarui atau hapus) operasi.

Untuk memanipulasi sumber daya lebih lanjut, kami sering menggunakan metode JS ini (disarankan) seperti .map(), .filter()dan .reduce().

Jika Anda ingin menjadi pengembang web yang lebih baik, memulai bisnis Anda sendiri, mengajari orang lain, atau meningkatkan keterampilan pengembangan Anda, saya akan memposting tip dan trik mingguan tentang bahasa pengembangan web terbaru.

Inilah yang akan kami bahas

  1. Berurusan dengan permintaan HTTP asinkron JS
  2. Apa itu AJAX?
  3. Mengapa Fetch API?
  4. Pengantar singkat untuk Fetch API
  5. Fetch API - contoh CRUD ← hal bagus!

1. Berurusan dengan permintaan HTTP asinkron JS

Salah satu bagian yang paling menantang dalam memahami cara kerja JavaScript (JS) adalah memahami cara menangani permintaan asinkron, yang membutuhkan dan memahami cara kerja promise dan callback.

Dalam sebagian besar bahasa pemrograman, kita berpikir bahwa operasi terjadi secara berurutan (secara berurutan). Baris pertama harus dijalankan sebelum kita dapat melanjutkan ke baris berikutnya. Ini masuk akal karena begitulah cara kita sebagai manusia beroperasi dan menyelesaikan tugas sehari-hari.

Tetapi dengan JS, kami memiliki beberapa operasi yang berjalan di latar belakang / latar depan, dan kami tidak dapat memiliki aplikasi web yang berhenti setiap kali menunggu acara pengguna.

Mendeskripsikan JavaScript sebagai asinkron mungkin menyesatkan. Lebih akurat untuk mengatakan bahwa JavaScript sinkron dan single-threaded dengan berbagai mekanisme callback. Baca lebih lajut.

Meskipun demikian, terkadang hal-hal harus terjadi secara berurutan, jika tidak maka akan menimbulkan kekacauan dan hasil yang tidak diharapkan. Oleh karena itu, kami dapat menggunakan promise dan callback untuk menyusunnya. Contohnya adalah memvalidasi kredensial pengguna sebelum melanjutkan ke operasi berikutnya.

2. Apa itu AJAX

AJAX adalah singkatan dari Asynchronous JavaScript and XML, dan ini memungkinkan halaman web diperbarui secara asinkron dengan bertukar data dengan server web saat aplikasi berjalan. Singkatnya, ini pada dasarnya berarti Anda dapat memperbarui bagian-bagian halaman web tanpa memuat ulang seluruh halaman (URL tetap sama).

AJAX adalah nama yang menyesatkan. Aplikasi AJAX mungkin menggunakan XML untuk mengangkut data, tetapi sama umum untuk mengangkut data sebagai teks biasa atau teks JSON.

- w3shools.com

AJAX sepenuhnya?

Saya telah melihat bahwa banyak pengembang cenderung menjadi sangat bersemangat tentang memiliki semuanya dalam satu aplikasi halaman (SPA), dan ini menyebabkan banyak rasa sakit asinkron! Tapi untungnya, kami memiliki pustaka seperti Angular, VueJS dan React yang membuat proses ini jauh lebih mudah dan praktis.

Secara keseluruhan, penting untuk memiliki keseimbangan antara apa yang harus memuat ulang seluruh halaman atau sebagian halaman.

Dan dalam banyak kasus, pemuatan ulang halaman berfungsi dengan baik dalam hal seberapa kuat browser tersebut. Dulu, pemuatan ulang halaman akan memakan waktu beberapa detik (tergantung pada lokasi server dan kemampuan browser). Tapi browser saat ini sangat cepat sehingga memutuskan apakah akan melakukan AJAX atau memuat ulang halaman bukanlah perbedaan besar.

Pengalaman pribadi saya adalah membuat mesin telusur dengan tombol telusur sederhana jauh lebih mudah dan lebih cepat daripada melakukannya tanpa tombol. Dan dalam banyak kasus, pelanggan tidak peduli apakah itu SPA atau pemuatan ulang halaman tambahan. Tentu saja, jangan salah paham, saya memang suka SPA, tetapi kita perlu mempertimbangkan beberapa trade-off, jika kita berurusan dengan anggaran terbatas dan kurangnya sumber daya maka mungkin solusi cepat adalah pendekatan yang lebih baik.

Pada akhirnya, itu sangat tergantung pada kasus penggunaan, tetapi secara pribadi saya merasa bahwa SPA membutuhkan lebih banyak waktu pengembangan dan sedikit sakit kepala daripada memuat ulang halaman sederhana.

3. Mengapa Fetch API?

Ini memungkinkan kita untuk melakukan permintaan HTTP deklaratif ke server. Untuk setiap permintaan, itu membuat Promiseyang harus diselesaikan untuk menentukan tipe konten dan mengakses data.

Sekarang keuntungan dari Fetch API adalah didukung penuh oleh ekosistem JS, dan juga merupakan bagian dari dokumen MDN Mozilla. Dan yang tak kalah pentingnya, ini berfungsi di luar kotak pada sebagian besar browser (kecuali IE). Dalam jangka panjang, saya menduga ini akan menjadi cara standar untuk memanggil API web.

Catatan! Saya sangat mengetahui pendekatan HTTP lainnya seperti menggunakan Observable dengan RXJS, dan bagaimana fokusnya pada manajemen memori / kebocoran dalam hal berlangganan / berhenti berlangganan dan sebagainya. Dan mungkin itu akan menjadi cara standar baru dalam melakukan permintaan HTTP, siapa tahu?

Oya, di artikel ini saya hanya fokus pada Fetch API, tapi semoga kedepannya menulis artikel tentang Observable dan RXJS.

4. Pengenalan singkat ke Fetch API

The fetch()Metode mengembalikan Promiseyang memecahkan Responsedari Requestuntuk menunjukkan status (sukses atau tidak). Jika Anda pernah mendapatkan pesan ini promise {}di layar log konsol Anda, jangan panik - itu pada dasarnya berarti Promiseberfungsi, tetapi menunggu untuk diselesaikan. Jadi untuk mengatasinya kita membutuhkan .then()handler (callback) untuk mengakses konten.

Jadi singkatnya, pertama kita tentukan path ( Fetch ), kedua request data dari server ( Request ), ketiga tentukan jenis konten ( Body ) dan yang terakhir, kita akses datanya ( Respon ).

Jika Anda kesulitan memahami konsep ini, jangan khawatir. Anda akan mendapatkan gambaran yang lebih baik melalui contoh yang ditunjukkan di bawah ini.

The path we'll be using for our examples //jsonplaceholder.typicode.com/users // returns JSON

5. Ambil API - Contoh HTTP

Jika kita ingin mengakses data tersebut, kita membutuhkan dua .then()handler (callback). Tetapi jika kita ingin memanipulasi sumber daya, kita hanya membutuhkan satu .then()penangan. Namun, kita dapat menggunakan yang kedua untuk memastikan nilainya telah dikirim.

Template Basic Fetch API:

Catatan! Contoh di atas hanya untuk tujuan ilustrasi. Kode tidak akan berfungsi jika Anda menjalankannya.

Ambil contoh API

  1. Menampilkan pengguna
  2. Menampilkan daftar pengguna
  3. Membuat pengguna baru
  4. Menghapus pengguna
  5. Memperbarui pengguna
Catatan! Sumber daya tidak akan benar-benar dibuat di server, tetapi akan mengembalikan hasil palsu untuk meniru server asli.

1. Menampilkan pengguna

Seperti yang disebutkan sebelumnya, proses menampilkan satu pengguna terdiri dari dua .then()penangan (callback), yang pertama untuk mendefinisikan objek, dan yang kedua untuk mengakses data.

Perhatikan hanya dengan membaca string kueri, /users/2kita dapat memahami / memprediksi apa yang dilakukan API. Untuk informasi lebih lanjut tentang cara menulis REST API berkualitas tinggi, lihat tip pedoman ini yang ditulis oleh Mahesh Haldar.

Contoh

2. Menampilkan daftar pengguna

Contoh ini hampir identik dengan contoh sebelumnya kecuali string kueri adalah /users, dan bukan /users/2.

Contoh

3. Membuat pengguna baru

Yang ini terlihat sedikit berbeda dari contoh sebelumnya. Jika Anda tidak akrab dengan protokol HTTP, itu hanya memberikan kita dengan beberapa metode yang manis seperti POST, GET, DELETE, UPDATE, PATCHdan PUT. Metode ini adalah kata kerja yang hanya menjelaskan jenis tindakan yang akan dijalankan, dan sebagian besar digunakan untuk memanipulasi sumber daya / data di server.

Bagaimanapun, untuk membuat pengguna baru dengan Fetch API, kita perlu menggunakan kata kerja HTTP POST. Tapi pertama-tama, kita perlu mendefinisikannya di suatu tempat. Untungnya, ada argumen opsional yang Initbisa kita berikan bersama URL untuk menentukan pengaturan kustom seperti jenis metode, isi, kredensial, header, dan sebagainya.

Catatan: fetch()Parameter metode identik dengan yang ada pada Request()konstruktor.

Contoh

4. Menghapus pengguna

Untuk menghapus pengguna, pertama-tama kita harus menargetkan pengguna dengan /users/1, dan kemudian kita menentukan jenis metode DELETE.

Contoh

5. Memperbarui pengguna

Kata kerja HTTP PUTdigunakan untuk memanipulasi sumber daya target, dan jika Anda ingin melakukan perubahan parsial, Anda harus menggunakan PATCH. Untuk informasi lebih lanjut tentang apa yang dilakukan kata kerja HTTP ini, lihat ini.

Contoh

Kesimpulan

Sekarang Anda memiliki pemahaman dasar tentang cara mengambil atau memanipulasi sumber daya dari server menggunakan API Pengambilan JavaScript, serta cara menangani promise. Anda dapat menggunakan artikel ini sebagai panduan tentang cara menyusun permintaan API Anda untuk operasi CRUD.

Secara pribadi, saya merasa Fetch API bersifat deklaratif dan Anda dapat dengan mudah memahami apa yang terjadi tanpa pengalaman pengkodean teknis.

Semua contoh ditampilkan dalam permintaan basis-dijanjikan di mana kita merangkai permintaan menggunakan .thencallback. Ini adalah pendekatan standar yang sudah dikenal oleh banyak pengembang, namun, jika Anda ingin menggunakannya, async/awaitlihat artikel ini. Konsepnya sama, async/awaithanya saja lebih mudah membaca dan menulis.

Berikut adalah beberapa artikel yang saya tulis tentang ekosistem web bersama dengan tip dan trik pemrograman pribadi.

  • Perbandingan antara Angular dan React
  • Pikiran yang kacau mengarah pada kode yang kacau
  • Pengembang yang selalu ingin mempelajari hal baru
  • Panduan praktis untuk modul ES6
  • Pelajari Konsep Web inti ini
  • Tingkatkan keterampilan Anda dengan metode JavaScript penting ini
  • Program lebih cepat dengan membuat perintah bash kustom

Anda dapat menemukan saya di Medium tempat saya menerbitkan setiap minggu. Atau Anda dapat mengikuti saya di Twitter, di mana saya memposting tip dan trik pengembangan web yang relevan bersama dengan cerita pribadi.

NB Jika Anda menikmati artikel ini dan ingin lebih banyak yang seperti ini, silakan tepuk ❤ dan bagikan dengan teman-teman yang mungkin membutuhkannya, itu karma baik.