Pertama-tama, terima kasih kepada penulis axios dan wepy karena telah menyediakan perpustakaan yang luar biasa!
Ini adalah plug-in lemah yang memungkinkan Anda menggunakan aksio dalam program kecil
dokumentasi aksio |. dokumentasi sedih
Saat membuat program mini, fungsi fungsi wx.request
yang ada di dalam program mini sangat terbatas. Bahkan wepy.request
hanyalah enkapsulasi sederhana dari fungsi aslinya dan tidak dapat menyediakan fungsi lanjutan seperti aksio. in memungkinkan sebagian besar fungsi aksio digunakan dalam program kecil.
Sambil menjaga API sedekat mungkin dengan API asli axios, plugin ini merangkum wx.request
, wx.uploadFile
, dan wx.downloadFile
. Pada saat yang sama, plugin ini menyediakan fungsi antrian permintaan, sehingga meningkatkan batas pengiriman hingga 5 permintaan secara bersamaan.
Jika Anda menyukainya, beri bintang dan dukung? Isu dan PR dipersilakan
Gunakan npm atau benang untuk menginstal axios dan wepy-plugin-axios secara bersamaan
npm install axios wepy-plugin-axios --simpan benang tambahkan axios wepy-plugin-axios
Catatan: Plug-in ini harus digunakan dengan wepy . Contoh berikut menggunakan wepy versi terbaru. Jika Anda tidak tahu cara menggunakan wepy atau axios, harap baca dokumentasinya masing-masing terlebih dahulu.
Konfigurasikan wepy
Tambahkan item axios
ke plugins
wepy.config.js
. Plugin tidak memiliki opsi, cukup gunakan objek kosong sebagai opsi.
modul.ekspor = { // ...plugin konfigurasi lainnya: {// ...aksio plugin lain: {} }}
Catatan: Jika Anda menggunakan konfigurasi default yang dihasilkan oleh wepy, ada kode berikut di akhir file:
modul.ekspor.plugin = { uglifyjs: {// ... }, menit gambar: {// ... }}
Di sini Anda juga perlu memasukkan baris axios: {}
, jika tidak, kesalahan akan terjadi saat membuat versi rilis.
Konfigurasikan aksio
Perkenalkan fungsi untuk menghasilkan adaptor dari wepy-plugin-axios/dist/adapter
, lalu teruskan instance axios ke fungsi ini untuk mendapatkan adaptor
Gunakan axios.defaults
atau axios.create
untuk menyetel properti adapter
axios (yang terakhir disarankan)
import axios from 'axios'import wepyAxiosAdapter from 'wepy-plugin-axios/dist/adapter'// Inisialisasi adaptor harus dijalankan sebelum axios lainnya.create const adapter = wepyAxiosAdapter(axios)export default axios.create({ adaptor: adaptor // Properti ini adalah kunci untuk menggunakan aksio dalam program mini // ...Properti lainnya})
Contoh berikut mengasumsikan bahwa konfigurasi telah selesai sesuai dengan konten di atas.
//Kirim permintaan GET normal axios.get('https://huajingkun.com/api/userinfo')//Kirim data json axios.request({ metode: 'posting', url: 'https://huajingkun.com/api/userinfo', data: {nama panggilan: '233' }})//Kirim data berkode urlen axios.post('https://huajingkun.com/api/userinfo', { nama panggilan: '233' }, { header: {'tipe konten': 'application/x-www-form-urlencoded' }})
Jika kolom $upload
muncul di data permintaan POST, permintaan ini dianggap sebagai permintaan unggah file.
axios.post('https://huajingkun.com/api/avatar', { $upload: {name: 'avatar',filePath: 'wxfile://sometempfilepath' // Hasil dari antarmuka seperti wx.chooseImage }, // ...Data lain dikirim bersamaan})
Jika responseType
adalah file
dalam permintaan GET, permintaan ini dianggap sebagai permintaan pengunduhan file. Jalur sementara file dikembalikan (lihat dokumentasi pengembangan program mini untuk detailnya)
Catatan: Protokol http hanya dapat digunakan saat ini
axios.get('http://www.baidu.com', { responType: 'file' }).then(response => { console.log(response.data) // Menampilkan jalur sementara dari file yang berhasil diunduh})
Plug-in ini menyediakan dukungan untuk sebagian besar opsi axios, dan juga membuat beberapa modifikasi berdasarkan API axios asli:
Catatan: Karena terbatasnya fungsi permintaan program mini, opsi berikut tidak didukung. Jika opsi berikut muncul saat digunakan, opsi tersebut akan diabaikan.
timeout
withCredentials
auth
xsrfCookieName
xsrfHeaderName
onUploadProgress
onDownloadProgress
maxContentLength
maxRedirects
httpAgent
httpsAgent
proxy
url
: Protokolnya harus ditentukan, dan hanya bisa http atau https. Hanya mendownload file yang bisa menggunakan http
method
: hanya dapat berupa metode yang didukung oleh mini program (lihat dokumentasi pengembangan program mini untuk detailnya)
responseType
: hanya dapat berupa salah satu dari json
, text
, dan file
Konten yang dikembalikan serupa dengan konten aksio yang dikembalikan:
{ //Data respons dikirim kembali oleh server //Untuk permintaan pengunduhan file, isi bidang data adalah jalur sementara dari data file: objek string |. // Status kode respons HTTP: nomor, // Header HTTP dikembalikan oleh server. Semua nama header menggunakan huruf kecil // Untuk permintaan upload atau download, kolom headers selalu berupa objek kosong (aplet tidak menyediakan konten header yang dikembalikan) header: objek, // Opsi permintaan yang digunakan oleh axios config: objek, // Teruskan konten spesifik dari wx.request atau wx.uploadFile atau wx.downloadFile request: object}
Karena sistem plug-in wepy saat ini tidak cukup sempurna, plug-in ini menggunakan metode yang relatif "kotor" untuk memungkinkan aksio digunakan di wepy:
Ubah langsung file sumber axios
Definisi adaptor dalam file sumber axios lib/defaults.js
telah dihapus di lib/plugin.js
. Karena axios mendukung browser dan Node.js, wepy tidak dapat mengabaikan modul asli Node.js saat pengemasan menyebabkan kemasannya rusak.
Namun, plugin wepy saat ini hanya dapat mengubah file sumber pada langkah terakhir pengemasan, dan tidak dapat mengubah informasi ketergantungan. Oleh karena itu, kode yang disiapkan untuk Node.js tidak dapat diabaikan, sehingga hanya dapat dihapus secara kasar kode rusak oleh browser Saya juga menghapusnya, karena XMLHttpRequest
tidak dapat digunakan dalam program mini, dan adaptor khusus harus digunakan sepenuhnya. Setelah dihapus, ukuran file juga dapat dikurangi.
Modifikasi ini berarti jika kode applet Anda berbagi folder node_modules
dengan kode lain, kode lain tidak akan dapat menggunakan axios secara normal.
Karena wepy saat ini tidak memiliki fungsi alias, Anda hanya dapat menyalin seluruh folder proyek ke folder node_modules
proyek pengujian selama pengembangan, dan mengubah wepy-plugin-axios/dist/adapter
menjadi wepy-plugin-axios/lib/adapter.js
Jalankan perintah berikut selama kompilasi untuk mendapatkan file terakhir di folder dist
:
npm jalankan pembangunan
MIT