Inilah Cara Membuat Panggilan AJAX Dan API Dengan Vue JS
Baru-baru ini, saya melihat orang-orang bertanya bagaimana menangani permintaan AJAX dan panggilan API dengan Vue.
Pada awalnya, saya tidak begitu mengerti mengapa orang bingung tentang ini karena, ini bukan pertanyaan Vue tetapi lebih merupakan pertanyaan JavaScript.
Lalu… Iluminasi! Saya menemukan mengapa orang sangat bingung tentang ini: Itu karena Vue sangat fleksibel dan tidak memiliki aturan untuk itu dan menyerahkan keputusan kepada Anda.
Meskipun ini mungkin bagus untuk proyek kecil, pada proyek menengah hingga besar, Anda perlu mengetahui kapan dan bagaimana memisahkan masalah.
Di mana saya dapat melakukan panggilan API? Mixin? Tindakan Vuex? Komponen?
Jika Anda hanya menginginkan jawaban akhir, lanjutkan ke judul berikutnya.
If you want a detailed explanation to become a better developer, let’s see all the options with their pros and cons:
Mixins: Anda bisa memasukkannya ke dalam mixin bersama dan mengimpornya saat Anda membutuhkannya
- - PROS: Anda hanya memuat saat Anda membutuhkannya
- - CONS: Anda harus menambahkannya sebagai metode dan oleh karena itu, campurkan perhatian antara metode yang digunakan oleh template dan metode yang digunakan untuk logika JS yang tidak terkait dengan template
Tindakan Vuex: Anda dapat membuat tindakan Vuex untuk setiap permintaan AJAX
- - PROS: Ini terpusat dan tersedia di komponen Anda dan dapat mengubah status global
- - CONS: Ya… Anda perlu memuat Vuex lol. Jika proyek Anda tidak membutuhkannya, agak berlebihan untuk memuatnya hanya untuk panggilan AJAX. Apalagi jika Anda tidak melakukan mutasi dalam tindakan Anda, menurut saya itu menjadi sebuah anti-pola
Komponen: Anda dapat langsung melakukan panggilan AJAX dalam metode komponen Anda
- - PROS: Anda hanya menggunakan apa yang Anda butuhkan dan tidak kelebihan beban
- - CONS: Panggilan Anda tersebar di mana-mana dan menjadi sangat sulit dipertahankan. Anda dapat membuat duplikasi kode jika dua komponen memerlukan panggilan API yang sama
Seperti yang Anda lihat, semuanya memiliki pro dan kontra, jadi mana yang terbaik?
Ini bukan masalah Vue, ini masalah arsitektur JavaScript.
Pertanyaan yang harus Anda tanyakan pada diri sendiri adalah: Apakah panggilan API saya terkait dengan Vue?
Jawabannya adalah: Tidak, itu terkait dengan aplikasi Anda.
Setiap kali sesuatu dapat diabstraksikan: abstraksi!
Solusinya: Buat file JS terpisah yang Anda impor
Solusinya sebenarnya cukup mudah. Panggilan API Anda harus terpusat dan dapat digunakan kembali, jadi mengapa tidak menggunakan sesuatu yang dimiliki vanilla JS: kelas atau objek literal.
Untuk setiap sumber daya API, buat file API dengan literal objek atau kelas statis atau cukup ekspor fungsi yang membuat panggilan API.
Why is this better?
- Jika Anda membutuhkannya di proyek lain yang bukan proyek Vue, yah: ini dapat digunakan kembali! Itu hanya file JS, kan?
- Jika jalur / url berubah di API, itu terpusat jadi tidak perlu mengingat di mana tindakan itu dipanggil atau di komponen mana, buka saja file API Anda dan buat perubahan di sana :)
- Abstraksi selalu lebih baik daripada logika yang digabungkan dengan erat
Berikut adalah beberapa layar untuk memahami apa yang saya katakan.
Yah, saya harap ini jelas. Panggilan API atau GraphQL tidak boleh digabungkan langsung ke Vue. Mereka independen dan tidak terikat pada lapisan tampilan Anda sehingga Anda dapat mengabstraksikannya.
Berikut adalah daftar hal-hal yang saya abstraksi pada proyek Vue menengah-ke-besar saya:
- Validator kustom
- Api atau permintaan AJAX lainnya
- Model (model di sini tidak seperti model back-end, ini lebih seperti pemformat data yang kebanyakan digunakan dalam file API untuk memformat data sebelum saya meneruskannya ke komponen)
- Pembungkus analitik / Pembungkus Google Api / Pembungkus Facebook… Layanan apa pun yang tidak terkait dengan Vue yang dapat saya miliki
Ingat, itu hanya file JS, Anda dapat mengimpornya di komponen atau toko Vuex atau di Mixins dan seterusnya.
Framework dan library bagus, tetapi pola desain JavaScript lebih baik.
TIP PRO: keuntungan lain dengan ini, adalah Anda juga dapat mengimpornya di penjaga navigasi Vue-router atau perpustakaan lain tempat Anda terhubung dan melakukan beberapa panggilan API :)