Pakej Axios NPM: Panduan Pemula untuk Memasang dan Membuat Permintaan HTTP

Pengenalan

Apabila membina aplikasi web moden, membuat permintaan HTTP ialah tugas teras untuk mengambil atau menghantar data ke pelayan. Walaupun JavaScript menyediakan API pengambilan sebagai cara asli untuk mengendalikan permintaan ini, ramai pembangun lebih suka menggunakan pakej npm Axios, perpustakaan yang kaya dengan ciri dan intuitif. Axios memudahkan proses dengan menawarkan klien HTTP berasaskan janji yang berfungsi dengan lancar dalam kedua-dua pelayar dan persekitaran Node.js. Sokongannya untuk async/menunggu menjadikan kod lebih mudah dibaca dan diselenggara, terutamanya apabila mengendalikan berbilang permintaan.

Blog ini akan membantu anda bermula dengan Axios pakej npm, merangkumi cara memasang dan menggunakannya untuk operasi HTTP asas seperti GET, POST dan PUT. Kami juga akan menyelami ciri-cirinya dan sebab ia menjadi pilihan utama untuk pembangun berbanding alternatif seperti API pengambilan asli.

Apakah Axios?

Axios ialah perpustakaan JavaScript ringan yang direka untuk menjadikan permintaan HTTP lebih mudah dan lebih cekap. Ia beroperasi sebagai pelanggan berasaskan janji, membolehkan pembangun mengendalikan aliran data tak segerak dengan cara yang lebih bersih dan terurus. Sama ada anda bekerja dalam penyemak imbas atau dalam persekitaran Node.js, Axios menyediakan penyelesaian bersatu untuk berinteraksi dengan API.

Ciri-ciri Axios

• Berasaskan janji: Berfungsi dengan lancar dengan janji dan menyokong sintaks tak segerak/menunggu untuk kod tak segerak yang lebih bersih.
• Transformasi JSON Automatik: Axios menukar respons JSON kepada objek JavaScript secara automatik, menyimpan langkah tambahan untuk menghuraikan data secara manual.
• Pemintas Permintaan dan Tindak Balas: Ia membenarkan pembangun mengubah suai permintaan atau respons secara global sebelum ia dikendalikan.
• Konfigurasi Lalai: Anda boleh mencipta kejadian Axios dengan konfigurasi yang dipratentukan seperti URL asas atau pengepala, mengurangkan kod berulang.
• Pengendalian Ralat: Menyediakan pengendalian ralat yang mantap dengan mesej ralat terperinci, menjadikan penyahpepijatan lebih mudah.

Mengapa Pilih Axios Over fetch?

Walaupun API pengambilan tersedia secara asli dalam JavaScript, Axios menawarkan beberapa kelebihan yang menjadikannya pilihan pilihan:

1. Pengendalian JSON Automatik: Dengan pengambilan, pembangun perlu menghuraikan respons secara manual menggunakan response.json(). Axios melakukan ini secara automatik.

   // Using fetch
   fetch(url)
     .then(res => res.json())
     .then(data => console.log(data));

   // Using Axios
   axios.get(url)
     .then(response => console.log(response.data));

1. Pemintas Minta: Axios membolehkan pembangun mengubah suai pengepala atau mengendalikan token pengesahan melalui pemintas, yang tidak disokong secara asli oleh pengambilan.
2. Pengendalian Ralat: Axios menyediakan objek ralat yang lebih terperinci, manakala fetch menganggap kod respons HTTP seperti 404 atau 500 sebagai permintaan yang berjaya melainkan disemak secara eksplisit.
3. Sokongan untuk Penyemak Imbas Lama: Axios termasuk sokongan terbina dalam untuk penyemak imbas lama, tidak seperti pengambilan, yang mungkin memerlukan poliisi.

Ciri-ciri ini, digabungkan dengan kemudahan penggunaannya, menjadikan Axios npm alat yang boleh dipercayai dan mesra pembangun untuk mengendalikan permintaan HTTP.

Jika anda berminat dengan perbandingan yang lebih mendalam, kami mempunyai blog lain yang menyelami lebih mendalam tentang nuansa Axios vs fetch, membincangkan masa untuk memilih satu daripada yang lain. Lihat di sini: Axios vs Fetch: Mana Yang Perlu Anda Pilih untuk Projek Anda?.

Cara Memasang Axios npm

Bermula dengan Axios npm adalah pantas dan mudah. Di bawah ialah arahan langkah demi langkah untuk memasang dan memasukkan Axios dalam projek anda.

Langkah 1: Memasang Axios

Untuk menggunakan Axios, anda perlu memasangnya dahulu dalam projek anda. Anda boleh melakukan ini menggunakan npm atau benang.

1. Menggunakan npm (Pengurus Pakej Nod): Buka terminal anda dalam direktori projek dan jalankan arahan berikut:

   npm install axios

1. Menggunakan Benang: Jika anda menggunakan Benang sebagai pengurus pakej anda, jalankan:

   yarn add axios

Ini akan menambah Axios sebagai kebergantungan pada fail package.json anda.

Langkah 2: Sertakan Axios dalam Projek Anda

Selepas memasang Axios, anda perlu mengimportnya ke dalam fail JavaScript atau TypeScript anda.

1. Menggunakan Sintaks CommonJS: Jika anda bekerja dalam persekitaran CommonJS (cth., Node.js), anda boleh memasukkan Axios menggunakan memerlukan:

   const axios = require('axios');

1. Menggunakan Sintaks ES6: Untuk modul ES6 atau rangka kerja JavaScript moden seperti React, import Axios seperti berikut:

   import axios from 'axios';

Kedua-dua pendekatan akan berfungsi bergantung pada persediaan projek anda dan persekitaran JavaScript.

Mengesahkan Pemasangan

Berikut ialah coretan kod ringkas untuk mengesahkan bahawa Axios telah dipasang dan diimport dengan betul:

import axios from 'axios';

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    console.log('Axios is working:', response.data);
  })
  .catch(error => {
    console.error('Error using Axios:', error);
  });

Jalankan kod ini dalam projek anda, dan jika anda melihat data yang diambil dilog masuk dalam konsol anda, anda telah berjaya memasang dan memasukkan Axios npm dalam projek anda.

4. Memahami Kaedah HTTP dengan Axios

Axios menjadikan pengendalian kaedah HTTP seperti GET, POST, PUT dan DELETE dengan mudah dengan sintaks intuitifnya. Mari terokai setiap kaedah ini secara terperinci, dengan contoh yang menunjukkan cara menggunakannya.

4.1. DAPATKAN Permintaan

Permintaan GET digunakan untuk mendapatkan semula data daripada pelayan. Ini ialah salah satu kaedah HTTP yang paling biasa, biasanya digunakan untuk mengambil senarai, profil pengguna atau sebarang data baca sahaja.

Contoh Kod:

   // Using fetch
   fetch(url)
     .then(res => res.json())
     .then(data => console.log(data));

   // Using Axios
   axios.get(url)
     .then(response => console.log(response.data));

Penjelasan:

• axios.get(url) menghantar permintaan GET ke URL yang disediakan.
• Respons.data mengandungi data yang diambil daripada pelayan.
• Blok .catch() mengendalikan sebarang ralat, seperti isu rangkaian atau titik akhir tidak sah.

Contoh Output:

   npm install axios

4.2. POST Permintaan

Permintaan POST digunakan untuk menghantar data ke pelayan, biasanya untuk mencipta rekod baharu seperti pendaftaran pengguna atau catatan blog.

Contoh Kod:

   yarn add axios

Penjelasan:

• axios.post(url, data) menghantar permintaan POST ke pelayan dengan data yang dinyatakan dalam hujah kedua.
• Dalam contoh ini, permintaan menghantar siaran baharu dengan tajuk, kandungan dan ID pengguna.
• Respons daripada pelayan termasuk sumber yang baru dibuat.

Contoh Output:

   const axios = require('axios');

4.3. PUT Permintaan

Permintaan PUT digunakan untuk mengemas kini sumber sedia ada. Ia biasanya menggantikan keseluruhan sumber dengan data yang dikemas kini.

Contoh Kod:

   import axios from 'axios';

Penjelasan:

• axios.put(url, data) menghantar permintaan PUT untuk mengemas kini sumber di URL yang diberikan.
• Argumen kedua mengandungi data yang dikemas kini, yang dalam kes ini mengemas kini tajuk dan kandungan siaran dengan id: 1.
• Pelayan bertindak balas dengan sumber yang dikemas kini.

Contoh Output:

import axios from 'axios';

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    console.log('Axios is working:', response.data);
  })
  .catch(error => {
    console.error('Error using Axios:', error);
  });

4.4. PADAM Permintaan

Permintaan DELETE digunakan untuk mengalih keluar sumber daripada pelayan. Ia biasanya digunakan untuk memadamkan rekod seperti profil pengguna atau siaran.

Contoh Kod:

axios.get('https://jsonplaceholder.typicode.com/users')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

Penjelasan:

• axios.delete(url) menghantar permintaan DELETE ke pelayan.
• Pelayan mengalih keluar sumber yang ditentukan oleh URL (/posts/1 dalam kes ini) dan mungkin mengembalikan respons pengesahan.

Contoh Output:

[
  { "id": 1, "name": "Leanne Graham", "email": "leanne@example.com" },
  { "id": 2, "name": "Ervin Howell", "email": "ervin@example.com" }
]

Respons kosong menunjukkan bahawa pemadaman berjaya.

Dengan kaedah HTTP ini, Axios menyediakan cara yang bersih dan ringkas untuk berinteraksi dengan API untuk semua operasi CRUD (Buat, Baca, Kemas Kini, Padam). Struktur berasaskan janji dan pengendalian ralat yang mantap menjadikannya alat yang berkuasa untuk sebarang projek. Sekarang mari kita terokai beberapa ciri lanjutan Axios!

Ciri Termaju Axios

Walaupun Axios mudah untuk permintaan HTTP asas, ia juga menawarkan ciri lanjutan yang menjadikannya alat berkuasa untuk kes penggunaan yang lebih kompleks. Berikut ialah beberapa ciri lanjutan yang ketara:

Mengkonfigurasi Pengepala

• Axios membolehkan anda menyesuaikan pengepala permintaan, yang amat berguna untuk menghantar token pengesahan atau menetapkan jenis kandungan.
• Contoh menetapkan pengepala untuk permintaan API:

   // Using fetch
   fetch(url)
     .then(res => res.json())
     .then(data => console.log(data));

   // Using Axios
   axios.get(url)
     .then(response => console.log(response.data));

Menyediakan Kejadian Axios

• Jika anda bekerja dengan API yang memerlukan konfigurasi berulang, anda boleh membuat tika Axios dengan tetapan yang dipratentukan seperti URL asas dan pengepala lalai.
• Contoh membuat contoh Axios:

   npm install axios

Menggunakan Pemintas

• Pemintas membenarkan anda mengubah suai permintaan atau respons secara global sebelum ia dikendalikan. Ini berguna untuk menambah pengepala, permintaan pengelogan atau mengendalikan ralat secara terpusat.
• Contoh pemintas permintaan:

   yarn add axios

Dengan ciri lanjutan ini, anda boleh mengoptimumkan penggunaan Axios anda untuk prestasi, kebolehskalaan dan kebolehselenggaraan yang lebih baik dalam aplikasi anda.

Menyelesaikan masalah Isu Biasa

Seperti mana-mana alat, menggunakan Axios mungkin mendatangkan cabaran. Berikut ialah beberapa isu biasa yang dihadapi oleh pembangun dan cara menyelesaikannya:

Isu CORS

• Masalah: Ralat Perkongsian Sumber Silang Asal (CORS) berlaku apabila pelayan API tidak membenarkan permintaan daripada domain anda.
• Penyelesaian:
  • Pastikan pelayan menyokong CORS dengan mendayakan pengepala yang betul seperti Access-Control-Allow-Origin.
  • Gunakan proksi atau sambungan penyemak imbas semasa pembangunan untuk memintas ralat.

Permintaan Tamat Masa

• Masalah: Pelayan API mengambil masa terlalu lama untuk bertindak balas, menyebabkan tamat masa.
• Penyelesaian: Tetapkan tamat masa dalam konfigurasi permintaan Axios anda:

   // Using fetch
   fetch(url)
     .then(res => res.json())
     .then(data => console.log(data));

   // Using Axios
   axios.get(url)
     .then(response => console.log(response.data));

Ralat Rangkaian

• Masalah: Isu seperti ENOTFOUND atau ERR_NETWORK berlaku disebabkan masalah sambungan.
• Penyelesaian: Semak sambungan rangkaian dan URL API anda. Tambah logik cuba semula untuk ralat sementara:

   npm install axios

Ralat Penyahpepijatan

• Masalah: Ralat Axios mungkin tidak selalunya jelas.
• Penyelesaian: Semak objek ralat untuk mendapatkan butiran:

   yarn add axios

Penolakan Janji Tidak Terkendali

• Masalah: Terlupa untuk mengendalikan .catch() boleh membawa kepada amaran penolakan janji yang tidak dikendalikan.
• Penyelesaian: Sentiasa sertakan blok .catch() atau gunakan try/catch dengan async/tunggu untuk mengurus ralat.

Dengan menangani isu biasa ini, anda boleh memastikan pengalaman yang lebih lancar semasa bekerja dengan Axios npm dalam projek anda.

Kesimpulan

Dalam panduan ini, kami telah meneroka asas penggunaan Axios npm untuk membuat permintaan HTTP dalam JavaScript. Daripada memasang Axios kepada membuat permintaan GET, POST, PUT dan DELETE pertama anda, anda telah melihat cara ia memudahkan proses dengan struktur berasaskan janji, penghuraian JSON automatik dan ciri pengendalian ralat yang mantap. Kami juga menyentuh tentang keupayaan lanjutan seperti mengkonfigurasi pengepala, mencipta tika Axios yang boleh diguna semula dan menggunakan pemintas untuk pengubahsuaian permintaan/tindak balas.

Axios ialah alat berkuasa yang boleh menyelaraskan cara anda mengendalikan permintaan API dalam projek anda. Sama ada anda sedang membina aplikasi web ringkas atau mengurus integrasi API yang kompleks, Axios menjadikan proses itu intuitif dan cekap.

Atas ialah kandungan terperinci Pakej Axios NPM: Panduan Pemula untuk Memasang dan Membuat Permintaan HTTP. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!