Panduan Axios Beginner ' s: Pelanggan HTTP Berasaskan Janji Berguna

Titik utama Axios

Axios adalah pelanggan HTTP berasaskan janji yang popular dengan API yang mudah digunakan yang boleh digunakan dalam persekitaran pelayar dan Node.js. Ia menyediakan alat serba boleh untuk pemaju JavaScript.
AXIOS berbeza dari API FETCH terbina dalam dalam beberapa cara, termasuk pengendalian kod ralat HTTP, kemasukan automatik kuki dalam permintaan, dan keupayaan untuk menyediakan upload/muat turun kemas kini kemajuan.
AXIOS membolehkan pemaju menukar data output atau input dan menambah pemintas, fungsi yang dicetuskan apabila permintaan dibuat atau respons diterima. Ciri -ciri ini memberikan fleksibiliti untuk memproses data dan pengurusan permintaan dan tindak balas.
Ekosistem perpustakaan pihak ketiga yang kuat wujud untuk memperluaskan keupayaan AXIOS. Tambahan ini meliputi dari pemintas dan penyesuai ujian kepada pembalak, meningkatkan keupayaan AXIOS dalam kes penggunaan yang berbeza.

Axios adalah pelanggan HTTP berasaskan janji yang popular dengan API yang mudah digunakan dan boleh digunakan dalam penyemak imbas dan persekitaran Node.js. Membuat permintaan HTTP untuk mendapatkan atau menyimpan data adalah salah satu tugas yang paling biasa untuk aplikasi JavaScript pelanggan. Perpustakaan pihak ketiga (terutamanya jQuery) telah lama menjadi cara yang popular untuk berinteraksi dengan API pelayar yang panjang dan menghapuskan perbezaan silang penyemak imbas. Sebagai orang secara beransur-ansur meninggalkan jquery dan beralih kepada peningkatan API DOM asli atau perpustakaan UI depan seperti React dan Vue.js, ia menjadi tidak bermakna untuk memasukkannya hanya untuk fungsi $ .ajax. Mari lihat bagaimana untuk memulakan dengan Axios dalam kod anda dan pelajari beberapa ciri yang menjadikannya popular di kalangan pemaju JavaScript.

Perbandingan Axios vs. Ambil

Anda mungkin sudah tahu bahawa pelayar moden mempunyai API yang baru dibina, jadi mengapa tidak hanya menggunakannya? Terdapat beberapa perbezaan antara kedua -dua, yang banyak percaya menjadikan Axios lebih berfaedah. Salah satu perbezaannya ialah bagaimana kedua -dua perpustakaan ini mengendalikan kod ralat HTTP. Apabila menggunakan FETCH, jika pelayan mengembalikan ralat siri 4xx atau 5xx, panggilan balik tangkapan anda tidak akan dicetuskan dan pemaju perlu menyemak kod status tindak balas untuk menentukan sama ada permintaan itu berjaya. Sebaliknya, jika salah satu kod status ini dikembalikan, Axios akan menolak permintaan janji itu. Satu lagi perbezaan kecil yang sering mengelirukan pemaju yang baru kepada API ialah pengambilan tidak secara automatik menghantar kuki kembali ke pelayan apabila membuat permintaan. Pilihan mesti diluluskan secara eksplisit untuk memasukkannya. Axios ada di sini untuk menyokong anda. Bagi sesetengah orang, satu perbezaan yang boleh menjadi penghalang ialah kemas kini kemajuan muat naik/muat turun. Oleh kerana AXIOS dibina di atas API XHR yang lebih tua, anda boleh mendaftarkan fungsi panggilan balik OnuploadProgress dan OnDownloadProgress untuk memaparkan peratusan siap dalam UI aplikasi. Pada masa ini, Fetch tidak menyokong ciri ini. Akhirnya, Axios boleh didapati dalam penyemak imbas dan node.js. Ini membantu berkongsi kod JavaScript antara penyemak imbas dan backend, atau melakukan penyerahan sisi pelayan aplikasi front-end. Nota: Node mempunyai versi API Fetch yang tersedia, tetapi pada pendapat saya, ciri -ciri lain Axios menawarkan ia lebih berfaedah.

Pemasangan

seperti yang anda harapkan, cara yang paling biasa untuk memasang Axios adalah melalui Pengurus Pakej NPM:

npm i axios

dan masukkannya dalam kod anda di mana anda memerlukannya:

// ES2015 风格导入
import axios from 'axios';

// Node.js 风格 require
const axios = require('axios');

Jika anda tidak menggunakan beberapa jenis modul modul (seperti webpack), anda sentiasa boleh mengekstrak perpustakaan dari CDN dengan cara tradisional:

<🎜>

Sokongan penyemak imbas

Axios berjalan di semua pelayar web moden dan Internet Explorer 8.

Hantar permintaan

Sama dengan fungsi JQuery's $ .ajax, anda boleh membuat apa -apa jenis permintaan HTTP dengan meluluskan objek pilihan ke AXIOS:

axios({
  method: 'post',
  url: '/login',
  data: {
    user: 'brunos',
    lastName: 'ilovenodejs'
  }
});

di sini, kami memberitahu AXIOS kaedah HTTP yang ingin kami gunakan (seperti GET/POST/DELETE dan lain -lain) dan URL yang mana kita harus membuat permintaan itu. Kami juga menyediakan beberapa data yang akan dihantar dengan permintaan dalam bentuk objek JavaScript Kunci/Nilai Mudah. Secara lalai, AXIOS akan bersiri ke JSON dan menghantarnya sebagai badan permintaan.

Pilihan Permintaan

Apabila anda membuat permintaan, anda boleh lulus banyak pilihan lain, tetapi berikut adalah beberapa pilihan yang paling biasa:

• baseUrl: Jika anda menentukan URL asas, ia akan dilampirkan pada mana -mana URL relatif yang anda gunakan.
• headers: Objek pasangan kunci/nilai yang akan dihantar sebagai tajuk.
• params: Objek pasangan kunci/nilai yang akan bersiri dan dilampirkan sebagai rentetan pertanyaan kepada URL.
• responseType: Jika format tindak balas yang anda harapkan bukan JSON, anda boleh menetapkan harta ini kepada arraybuffer, blob, document, text, stream, atau .
• auth: Objek yang melepasi medan nama pengguna dan kata laluan akan menggunakan kelayakan ini untuk melaksanakan pengesahan asas HTTP atas permintaan.

kaedah mudah

Seperti jQuery, terdapat beberapa pintasan untuk melakukan pelbagai jenis permintaan. Kaedah get, delete, head, dan options semua menerima dua parameter: URL dan objek konfigurasi pilihan.

npm i axios

Kaedah

post, put dan patch mengambil objek data sebagai parameter kedua dan objek konfigurasi pilihan sebagai parameter ketiga mereka:

// ES2015 风格导入
import axios from 'axios';

// Node.js 风格 require
const axios = require('axios');

Terima respons

Selepas permintaan dibuat, Axios mengembalikan janji yang akan menyelesaikan objek respons atau objek ralat.

<🎜>

Objek tindak balas

Jika permintaan itu berjaya, panggil balik then() anda akan menerima objek tindak balas dengan sifat berikut:

• data: muatan yang dikembalikan oleh pelayan. Secara lalai, Axios mengharapkan JSON dan menghuraikannya kembali ke objek JavaScript.
• status: Kod HTTP dikembalikan oleh pelayan.
• statusText: Mesej status HTTP dikembalikan oleh pelayan.
• headers: Semua tajuk yang dihantar kembali oleh pelayan.
• config: Konfigurasi Permintaan Asal.
• request: (Apabila berjalan di penyemak imbas) objek XMLHTTPREQUEST sebenar.

Objek ralat

Jika ada masalah dengan permintaan, janji akan ditolak dan objek ralat dipaparkan, yang mengandungi sekurang -kurangnya sifat berikut:

• message: teks mesej ralat.
• response: objek tindak balas yang diterangkan dalam bahagian sebelumnya (jika diterima).
• request: (Apabila berjalan di penyemak imbas) objek XMLHTTPREQUEST sebenar.
• config: Konfigurasi Permintaan Asal.

Convert and Interceptor

Axios menyediakan beberapa ciri ringkas yang diilhamkan oleh perpustakaan Angular. Walaupun mereka kelihatan sama, kes penggunaannya sedikit berbeza. $http

Convert

AXIOS membolehkan anda menyediakan fungsi untuk menukar data output atau input dalam bentuk dua pilihan konfigurasi yang boleh anda tetapkan semasa membuat permintaan: transformRequest dan transformResponse. Kedua -dua sifat adalah tatasusunan yang membolehkan anda menghubungkan pelbagai fungsi yang akan lulus data. Sebarang fungsi yang diluluskan kepada transformRequest akan digunakan untuk meletakkan, menyiarkan, dan permintaan patch. Mereka menerima data permintaan dan objek header sebagai parameter dan mesti mengembalikan objek data yang diubah suai.

npm i axios

boleh menambah fungsi ke transformResponse dengan cara yang sama, tetapi hanya panggil mereka sebelum menggunakan data tindak balas dan lulus respons kepada mana -mana panggil balik then(). Jadi apa yang boleh kita gunakan untuk penukaran? Kes penggunaan yang berpotensi adalah untuk menangani API yang mengharapkan untuk menerima data dalam format tertentu, seperti XML atau bahkan CSV. Anda boleh menyediakan sepasang penukaran untuk menukar data output dan input ke dalam format yang diperlukan oleh API dan menukarnya kembali dari format tersebut. Perlu diingat bahawa fungsi lalai Axios transformRequest dan transformResponse menukar data ke dan dari JSON, dan menyatakan bahawa anda sendiri akan mengatasi transformasi tersebut.

Interceptor

Walaupun penukaran membolehkan anda mengubah suai data output dan input, Axios juga membolehkan anda menambah fungsi yang dipanggil pemintas. Seperti penukaran, fungsi ini juga boleh dilampirkan pada permintaan atau dipecat apabila respons diterima.

// ES2015 风格导入
import axios from 'axios';

// Node.js 风格 require
const axios = require('axios');

Seperti yang anda perhatikan dari contoh di atas, terdapat beberapa perbezaan penting antara pemintas dan penukaran. Daripada hanya menerima data atau tajuk, pemintas menerima konfigurasi permintaan lengkap atau objek tindak balas. Apabila membuat pemintas, anda juga boleh memilih untuk menyediakan fungsi pengendali ralat yang membolehkan anda menangkap sebarang kesilapan dan mengendalikannya dengan sewajarnya. Pemintas permintaan boleh digunakan untuk melaksanakan operasi seperti mengambil token dari kedai tempatan dan menghantarnya dengan semua permintaan, sementara pemintas tindak balas boleh digunakan untuk menangkap tindak balas 401 dan mengalihkannya ke halaman log masuk untuk kebenaran.

add-ons pihak ketiga

Sebagai perpustakaan yang popular, Axios mendapat manfaat daripada ekosistem perpustakaan pihak ketiga yang memanjangkan keupayaannya. Dari pemintas untuk menguji penyesuai kepada pembalak, terdapat banyak alat yang tersedia. Berikut adalah beberapa alat yang saya fikir anda mungkin berguna:

• mock-adapter: Membolehkan anda dengan mudah mensimulasikan permintaan untuk memudahkan kod ujian.
• cache-plugin: Pembungkus untuk permintaan Cache selektif.
• redux-axios-middleware: Jika anda seorang pengguna Redux, middleware ini menyediakan cara yang bersih untuk menjadualkan permintaan Ajax menggunakan operasi lama biasa.

Senarai lebih banyak tambahan dan sambungan boleh didapati di repositori Axios GitHub. Semua dalam semua, terdapat banyak yang disyorkan di Axios. Ia mempunyai API yang mudah, dan cara yang praktikal dan cepat yang biasa kepada sesiapa yang telah menggunakan jQuery sebelum ini. Populariti dan ketersediaan pelbagai tambahan pihak ketiga menjadikannya pilihan yang boleh dipercayai untuk dimasukkan ke dalam aplikasi anda, sama ada di hujung depan, hujung belakang atau kedua-duanya.

Axios FAQ (FAQ)

Apakah perbezaan antara Axios dan Ambil API?

Axios dan Ambil API adalah kedua -dua alat permintaan HTTP yang popular. Walau bagaimanapun, terdapat beberapa perbezaan utama antara kedua -dua. Axios adalah pelanggan HTTP berasaskan janji yang berfungsi dalam penyemak imbas dan persekitaran Node.js. Ia menyediakan API tunggal untuk mengendalikan antara muka HTTP untuk XMLHTTPREQUESTS dan nod. Sebaliknya, API Fetch memberikan definisi umum mengenai permintaan dan objek tindak balas, yang juga berdasarkan janji. Tetapi tidak seperti Axios, API Fetch tidak berdasarkan XMLHTTPREQUEST, ia adalah modul terbina dalam untuk JavaScript ES6.

Bagaimana menggunakan Axios untuk mengendalikan kesilapan?

Axios menyediakan kaedah pengendalian yang kuat. Apabila ralat berlaku semasa permintaan AXIOS, ia ditolak dan objek ralat dipaparkan. Objek ralat mengandungi maklumat mengenai punca ralat, seperti mesej ralat, kod status HTTP, dan objek permintaan dan tindak balas. Anda boleh menangkap ralat ini menggunakan blok Cuba/menangkap atau kaedah tangkapan janji.

Bolehkah saya menggunakan Axios dalam React?

Ya, Axios boleh didapati untuk React. Malah, ia adalah pilihan yang popular untuk membuat permintaan HTTP dalam aplikasi React. Anda boleh menggunakan Axios dalam React untuk mendapatkan data dari API dan memaparkannya dalam komponen anda. Permintaan Axios dalam React boleh dibuat dalam cangkuk componentDidMount atau useEffect.

Bagaimana untuk membatalkan permintaan di Axios?

Axios menyediakan mekanisme untuk membatalkan permintaan. Ini boleh dilakukan menggunakan kaedah kilang CancelToken.source. Apabila anda ingin membatalkan permintaan, hubungi kaedah cancel pada objek sumber.

bagaimana membuat permintaan pos menggunakan AXIOS?

Mudah membuat permintaan pos menggunakan AXIOS. Anda boleh menggunakan kaedah post contoh AXIOS dan lulus URL dan data sebagai parameter. Data harus menjadi objek JavaScript yang mewakili muatan yang diminta.

Bolehkah saya menggunakan axios dalam vue.js?

Ya, Axios boleh didapati untuk Vue.js. Ia adalah pilihan yang popular untuk membuat permintaan HTTP dalam aplikasi Vue.js. Anda boleh menggunakan axios dalam vue.js untuk mendapatkan data dari API dan memaparkannya dalam komponen anda.

Bagaimana untuk menetapkan tajuk lalai di Axios?

Axios membolehkan anda menetapkan tajuk lalai yang akan dihantar dengan setiap permintaan. Ini boleh dilakukan dengan menggunakan sifat defaults contoh Axios. Anda boleh menetapkan sifat defaults objek headers ke objek JavaScript yang mewakili tajuk.

Bolehkah saya menggunakan axios dalam persekitaran node.js?

Ya, Axios boleh digunakan dalam persekitaran Node.js. Ia menyediakan API tunggal untuk mengendalikan antara muka HTTP untuk XMLHTTPREQUESTS dan nod. Ini menjadikannya alat yang serba boleh untuk membuat permintaan HTTP dalam JavaScript.

Bagaimana menangani respons dalam axios?

Apabila permintaan dibuat menggunakan AXIOS, ia mengembalikan janji yang dihuraikan sebagai objek tindak balas. Objek ini mengandungi data yang dikembalikan dari pelayan, status permintaan, tajuk, dan maklumat lain. Anda boleh menggunakan kaedah then Janji untuk mengendalikan respons ini.

Bolehkah saya membuat pelbagai permintaan pada masa yang sama menggunakan AXIOS?

Ya, Axios membolehkan anda membuat pelbagai permintaan pada masa yang sama. Ini boleh dilakukan dengan menggunakan kaedah Axios 'all. Anda lulus array janji yang dikembalikan oleh permintaan Axios ke kaedah all, yang mengembalikan janji baru yang akan dihuraikan apabila semua permintaan selesai.

Atas ialah kandungan terperinci Panduan Axios Beginner ' s: Pelanggan HTTP Berasaskan Janji Berguna. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!