Panduan Lengkap untuk Bekerja Dengan Axios

Axios adalah pustaka JavaScript yang menyediakan API sederhana untuk mengirimkan permintaan HTTP dari kode JavaScript sisi klien atau kode Node.js sisi server. Axios dibangun di atas JavaScript's Promise API, yang membuat kode asinkron lebih mudah dikelola.

Memulai Dengan Axios

Anda dapat memanfaatkan Axios di aplikasi Anda menggunakan Content Delivery Network (CDN) atau menginstalnya ke dalam proyek Anda.

Untuk menggunakan Axios secara langsung dalam HTML, salin tautan CDN di bawah dan masukkan di bagian kepala file HTML Anda:

<naskahsrc=" https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js">naskah>

Dengan pendekatan ini, Anda dapat menggunakan Axios dan Metode HTTP di badan skrip HTML Anda. Axios juga bisa konsumsi REST API dalam kerangka kerja seperti React.

Untuk menggunakan Axios dalam proyek Node.js, instal di direktori proyek Anda menggunakan npm atau pengelola paket benang:

npm instal axios
# atau
benang tambahkan axios

Setelah instalasi, Anda dapat mulai menggunakan Axios di proyek JavaScript Anda:

const sumbu = memerlukan('axios');

Sepanjang panduan ini, Anda akan bekerja dengan gratis JSONPlaceholder API. Meskipun API ini memiliki sekumpulan sumber daya, Anda hanya akan menggunakan /comments Dan /posts titik akhir. Titik akhir adalah URL khusus yang dapat diakses untuk mengambil atau memanipulasi data.

Membuat Permintaan GET Dengan Axios

Ada beberapa cara untuk membuat permintaan GET menggunakan Axios. Namun, sintaks umumnya tergantung pada preferensi.

Salah satu cara untuk membuat permintaan GET adalah dengan menggunakan sumbu() metode dengan objek yang menentukan metode permintaan sebagai mendapatkan dan URL tujuan pengiriman permintaan.

Misalnya:

const sumbu = memerlukan("aksi");
aksioma({
 metode: "mendapatkan",
 url: " https://jsonplaceholder.typicode.com/comments",
})
 .Kemudian((res) => {
menghibur.log (res.data);
 })
 .menangkap((berbuat salah) => {
menghibur.error (err);
 });

Contoh ini menciptakan janji menggunakan model pemrograman asinkron dengan merantai .Kemudian() Dan .menangkap() metode. Janji mencatat respons ke konsol saat permintaan berhasil dan mencatat pesan kesalahan jika permintaan gagal.

Axios juga menyediakan cara yang lebih mudah untuk membuat permintaan GET yang menghilangkan kebutuhan untuk meneruskan objek dengan merantai objek .mendapatkan() metode ke axios contoh.

Misalnya:

axios
 .mendapatkan(" https://jsonplaceholder.typicode.com/comments")
 .Kemudian((res) => {
menghibur.log (res.data);
 })
 .menangkap((berbuat salah) => {
menghibur.error (err);
 });

Membuat Permintaan POST Dengan Axios

Membuat permintaan POST dengan Axios mirip dengan membuat permintaan GET. Anda dapat mengirim data ke server menggunakan permintaan ini.

Cuplikan kode di bawah ini adalah contoh cara menggunakan Axios .pos() metode:

axios
 .pos(" https://jsonplaceholder.typicode.com/comments", {
 nama: "Jackson Smith",
 surel: "[email protected]",
 tubuh: "Ini adalah karya seni.",
 })
 .Kemudian((res) => {
menghibur.log (res.data);
 })
 .menangkap((berbuat salah) => {
menghibur.error (err);
 });

Kode membuat permintaan POST ke API JSONPlaceholder untuk membuat komentar baru. Itu axios.post metode mengirimkan data ke /comments titik akhir.

Data yang dikirim dalam permintaan adalah objek dengan a nama, surel, Dan tubuh Properti. Jika permintaan berhasil, maka Kemudian metode mencatat data respons ke konsol. Dan jika ada kesalahan, menangkap metode mencatat kesalahan ke konsol.

Membuat Permintaan PUT/PATCH Dengan Axios

Anda dapat menggunakan permintaan PUT atau PATCH untuk memperbarui sumber daya yang ada di server. Sementara PUT menggantikan seluruh sumber daya, PATCH hanya memperbarui bidang yang ditentukan.

Untuk membuat permintaan PUT atau PATCH dengan Axios, Anda harus menggunakan .meletakkan() atau .tambalan() metode masing-masing.

Berikut adalah contoh cara menggunakan metode ini untuk memperbarui file surel milik komentar dengan id 100:

const sumbu = memerlukan("aksi");
axios
 .mendapatkan(" https://jsonplaceholder.typicode.com/comments/100")
 .Kemudian((res) => {
menghibur.log (res.data.email);
 })
 .menangkap((berbuat salah) => {
menghibur.error (err);
 });
// Keluaran:
// '[email protected]'
axios
 .patch(" https://jsonplaceholder.typicode.com/comments/100", {
 surel: "[email protected]",
 })
 .Kemudian((res) => {
menghibur.log (res.data.email);
 })
 .menangkap((berbuat salah) => {
menghibur.error (err);
 });
// Keluaran:
// '[email protected]',

Program ini pertama-tama membuat permintaan GET ke titik akhir " https://jsonplaceholder.typicode.com/comments/100". Ini kemudian mencatat surel milik komentar dengan ID dari 100 ke konsol. Kami membuat permintaan GET sehingga Anda dapat melihat apa yang berubah setelah membuat permintaan PATCH.

Permintaan kedua adalah permintaan PATCH ke titik akhir yang sama. Kode ini memperbarui email komentar ke [email protected].

Membuat Permintaan DELETE Dengan Axios

Anda dapat menggunakan MENGHAPUS permintaan untuk menghapus sumber daya di server.

Ambil contoh berikut tentang cara menggunakan .menghapus() metode untuk menghapus sumber daya dari server:

axios
 .menghapus(" https://jsonplaceholder.typicode.com/comments/10")
 .Kemudian((res) => {
menghibur.log (res.data);
 })
 .menangkap((berbuat salah) => {
menghibur.error (err);
 });
//Output:
// {}

Dengan memasukkan objek kosong ke konsol, kode di atas menunjukkan bahwa ia menghapus komentar dengan ID 10.

Membuat Permintaan Secara Simultan Dengan Axios

Anda dapat mengambil data dari beberapa endpoint sekaligus menggunakan Axios. Untuk melakukan ini, Anda perlu menggunakan .semua() metode. Metode ini menerima larik permintaan sebagai parameternya dan menyelesaikan hanya ketika Anda menerima semua respons.

Pada contoh berikut, .semua() metode mengambil data dari dua titik akhir secara bersamaan:

axios
 .semua([
 axios.get(" https://jsonplaceholder.typicode.com/comments? _batas=2"),
 axios.get(" https://jsonplaceholder.typicode.com/posts? _batas=2"),
 ])
 .Kemudian(
 axios.menyebar((komentar, posting) => {
menghibur.log (komentar.data);
menghibur.log (posting.data);
 })
 )
 .menangkap((berbuat salah) =>menghibur.error (err));

Blok kode di atas mengirimkan permintaan secara bersamaan dan kemudian meneruskan respons ke .Kemudian() metode. milik Axios .menyebar() metode memisahkan respons dan menugaskan setiap respons ke variabelnya.

Akhirnya, konsol mencatat data properti dari dua tanggapan: komentar dan posting.

Mencegat Permintaan Dengan Axios

Terkadang, Anda mungkin perlu mencegat permintaan sebelum sampai ke server. Anda dapat menggunakan Axios pencegat.request.use() metode untuk mencegat permintaan.

Dalam contoh berikut, metode mencatat jenis permintaan ke konsol untuk setiap permintaan yang dibuat:

axios.interceptors.request.use(
 (konfigurasi) => {
menghibur.catatan(`${config.method} permintaan dibuat`);
kembali konfigurasi;
 },
 (kesalahan) => {
kembaliJanji.menolak (kesalahan);
 }
);
axios
 .mendapatkan(" https://jsonplaceholder.typicode.com/comments? _batas=2")
 .Kemudian((res) =>menghibur.log (res.data))
 .menangkap((berbuat salah) =>menghibur.error (err));

Program ini mendefinisikan pencegat Axios menggunakan axios.interceptors.request.use metode. Metode ini memakan waktu config Dan kesalahan objek sebagai argumen. Itu config objek berisi informasi tentang permintaan, termasuk metode permintaan (config.method) dan URL permintaan (config.url).

Fungsi pencegat mengembalikan config keberatan, memungkinkan permintaan untuk melanjutkan secara normal. Jika ada kesalahan, fungsi mengembalikan yang ditolak Janji obyek.

Terakhir, program membuat permintaan untuk menguji pencegat. Konsol akan mencatat jenis permintaan yang dibuat, dalam hal ini, permintaan GET.

Masih Ada Lagi untuk Axios

Anda telah mempelajari cara membuat dan mencegat permintaan dalam proyek Anda menggunakan Axios. Banyak fitur lain, seperti mengubah permintaan dan menggunakan instans Axios tersedia untuk Anda sebagai pengembang JavaScript untuk dijelajahi. Axios tetap menjadi opsi pilihan untuk membuat permintaan HTTP di aplikasi JavaScript Anda. Namun, Ambil API adalah opsi bagus lainnya yang dapat Anda jelajahi.