vue apis

vue-apis

• Sebuah plug-in vue yang terintegrasi dengan axios. Bangun API menggunakan pemrograman rantai dan kembalikan instance permintaan sebagai Promise. Penyederhanaan yang bagus tentang bagaimana api dibuat, dan bagaimana mereka direferensikan.

• Sebuah plug-in vue yang terintegrasi dengan axios. Gunakan pemrograman berantai untuk membangun API dan mengembalikan instance permintaan dengan Promise. Ini sangat menyederhanakan cara membangun api dan cara referensi (merujuk melalui this.$apis.apiName).

Dukungan Peramban

Terbaru ✔	Terbaru ✔	Terbaru ✔	Terbaru ✔	Terbaru ✔	11 ✔

Menginstal

npm install vue-apis
// or
yarn add vue-apis

Penggunaan

Impor

import Vue from 'vue'
import VueApis from 'vue-apis'

Vue.use(VueApis, options)

Api

fungsi	contoh	argumen	keterangan
setUrl	setUrl('https://baidu.com')	(url: Tali)	atur alamat url permintaan
setData	setData({sebuah:1})	(data: Objek)	mengatur objek badan pos
setParams	setParams({ t: Tanggal.sekarang() })	(params: Objek)	atur permintaan url permintaan
setHeader	setHeaders({ 'tipe konten': 'aplikasi/json' })	(header: Objek)	mengatur header permintaan
setWaktu habis	setWaktu habis(10000)	(batas waktu: Nomor)	atur batas waktu permintaan
setOpsi Kustom	setCustomOptions({ tipe respons: 'aliran' })	(pilihan: Objek, hapus: boolean)	atur opsi khusus

Pilihan

kunci pilihan	jenis	nilai bawaan	keterangan
lebah	obyek	{}	kumpulan api
tampilkan Memuat	fungsi	belum diartikan	tampilkan fungsi tata letak pemuatan
sembunyikan Memuat	fungsi	belum diartikan	sembunyikan fungsi tata letak pemuatan
pencegat	Objek Pencegat	belum diartikan	Anda dapat mencegat permintaan atau tanggapan sebelum ditangani atau ditangkap.

Objek Pencegat

bidang	jenis	keterangan
meminta	Objek Permintaan/Fungsi	Ketika instance-nya adalah 'Fungsi', itu adalah panggilan balik 'lalu' ke pencegat
tanggapan	ResponseObject/Fungsi	Ketika instance-nya adalah 'Fungsi', itu adalah panggilan balik 'lalu' ke pencegat

Objek Permintaan

Fungsi	misalnya
Kemudian	(konfigurasi) => { kembalikan konfigurasi;
menangkap	(kesalahan) => { return Promise.reject(kesalahan })

Objek Respons

Fungsi	misalnya
Kemudian	(tanggapan) => { tanggapan balik; }
menangkap	(kesalahan) => { return Promise.reject(kesalahan })

Contoh

• main.js

 impor Vue dari 'vue'impor VueApis dari 'vue-apis'impor Api dari './api'Vue.use(VueApis, {
api: API,
showLoading: () => {console.log('showLoading')
},
hideLoading: () => {console.log('hideLoading')
},
interseptor: {permintaan: { kemudian(config) {// Lakukan sesuatu sebelum permintaan dikirimreturn config; }, catch(error) {// Lakukan sesuatu dengan permintaan errorreturn Promise.reject(error }}, respon: { kemudian( respon) {// Lakukan sesuatu dengan respon datareturn respon }, catch(error) {// Lakukan sesuatu dengan respon errorreturn Promise.reject(error }}
}})

• api.js

 impor { ApiOptions, ApiMethod } dari 'vue-apis' const $api = {
readme () {kembalikan ApiOptions().setUrl(`https://raw.githubusercontent.com/Chans-Open-Source/vue-apis/master/README.md`).setMethod(ApiMethod.GET).setParams( { stempel waktu: Tanggal.sekarang()}).setHeaders({ Otorisasi: `Pembawa ${Tanggal.sekarang()}`}).request()
}}ekspor default $api

• rumah.vue

 <templat>
<div v-html="readme"></div></template><skrip>
ekspor default {data () { kembalikan {readme: '' }},async dibuat () { const res = menunggu ini.$apis.readme() this.readme = res}
}</skrip>

Data Formulir

• Api

 konstanta $api = {
formDataRequest (formData) {kembalikan ApiOptions baru().setUrl(URL).setMethod(ApiMethod.POST).setData(formData).request()
}}

• Buat Instans FormData

 const formData = jendela baru.FormData()formData.append(key, value)// Requestthis.$apis.formDataRequest(formData)

Opsi Kustom

 konstanta $api = {
formDataRequest (formData) {return new ApiOptions().setUrl(URL).setMethod(ApiMethod.POST).setData(formData).setCustomOptions({ url: `https://baidu.com`, // data tidak valid: {} , // parameter tidak valid: {}, // header tidak valid: {}, // metode tidak valid: {}, // tipe respons tidak valid: 'stream' // valid}, /* jelas semua opsi khusus pada awalnya */ false).request()
}}

Kode Sumber

• Sumber Demo Resmi

• Sumber Plugin