vue apis

vue-apis

• Un plug-in vue intégré à axios. Créez l'API à l'aide de la programmation en chaîne et renvoyez l'instance de requête sous forme de promesse. Une belle simplification de la façon dont les API sont construites et comment elles sont référencées.

• Un plug-in vue intégré à axios. Utilisez la programmation en chaîne pour créer l'API et renvoyer l'instance de requête avec Promise. Cela simplifie grandement la manière de construire l'API et la méthode de référence (référencement via this.$apis.apiName).

Prise en charge du navigateur

Dernier ✔	Dernier ✔	Dernier ✔	Dernier ✔	Dernier ✔	11 ✔

Installation

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

Usage

Importer

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

Vue.use(VueApis, options)

API

fonction	exemple	argument	description
définirUrl	setUrl('https://baidu.com')	(url : chaîne)	définir l'adresse URL de la demande
setData	setData({ a : 1})	(données : Objet)	définir l'objet du corps de publication
setParams	setParams({ t : Date.now() })	(paramètres : Objet)	définir la requête d'URL de la demande
setHeaders	setHeaders({ 'content-type': 'application/json' })	(en-têtes : Objet)	définir les en-têtes de requête
setTimeout	setTimeout(10000)	(délai d'expiration : numéro)	définir le délai d'expiration de la demande
setCustomOptions	setCustomOptions({responseType : 'stream' })	(options : Objet, clear : booléen)	définir des options personnalisées

Possibilités

touche d'option	taper	valeur par défaut	description
apis	objet	{}	ensemble d'API
showChargement	fonction	indéfini	afficher la fonction de mise en page de chargement
masquerChargement	fonction	indéfini	masquer la fonction de mise en page de chargement
intercepteurs	ObjetIntercepteur	indéfini	Vous pouvez intercepter les demandes ou les réponses avant qu'elles ne soient traitées ou interceptées.

ObjetIntercepteur

champ	taper	description
demande	RequêteObjet/Fonction	Lorsque l'instance est « Fonction », il s'agit d'un rappel « alors » vers l'intercepteur
réponse	RéponseObjet/Fonction	Lorsque l'instance est « Fonction », il s'agit d'un rappel « alors » vers l'intercepteur

ObjetDemande

Fonction	par ex.
alors	(config) => { return config }
attraper	(erreur) => { return Promise.reject(erreur);

Objet de réponse

Fonction	par ex.
alors	(réponse) => { return réponse }
attraper	(erreur) => { return Promise.reject(erreur);

Exemple

• main.js

 importer Vue depuis 'vue' importer VueApis depuis 'vue-apis' importer Api depuis './api'Vue.use(VueApis, {
API : API,
showLoading : () => {console.log('showLoading')
},
hideLoading : () => {console.log('hideLoading')
},
intercepteurs : {request : { then(config) {// Faire quelque chose avant que la requête ne soit sentreturn config ; }, catch(error) {// Faire quelque chose avec request errorreturn Promise.reject(error }}, réponse : { then( réponse) {// Faire quelque chose avec la réponse datareturn réponse; }, catch(error) {// Faire quelque chose avec la réponse errorreturn Promise.reject(error }}
}})

• api.js

 importer { ApiOptions, ApiMethod } depuis 'vue-apis' const $api = {
readme () {retourne le nouveau ApiOptions().setUrl(`https://raw.githubusercontent.com/Chans-Open-Source/vue-apis/master/README.md`).setMethod(ApiMethod.GET).setParams( { horodatage : Date.now()}).setHeaders({ Autorisation : `Bearer ${Date.now()}`}).request()
}}exporter $api par défaut

• home.vue

 <modèle>
<div v-html="readme"></div></template><script>
export default {data () { return {readme: '' }}, async create () { const res = wait this.$apis.readme() this.readme = res}
</script>

Données de formulaire

• API

 const $api = {
formDataRequest (formData) {retourne un nouveau ApiOptions().setUrl(URL).setMethod(ApiMethod.POST).setData(formData).request()
}}

• Créer une instance FormData

 const formData = new window.FormData()formData.append(clé, valeur)// Requestthis.$apis.formDataRequest(formData)

Options personnalisées

 const $api = {
formDataRequest (formData) {return new ApiOptions().setUrl(URL).setMethod(ApiMethod.POST).setData(formData).setCustomOptions({ url : `https://baidu.com`, // données invalides : {} , // paramètres non valides : {}, // en-têtes non valides : {}, // méthode non valide : {}, // type de réponse non valide : 'stream' // valide}, /* tout est effacé options personnalisées au début */ false).request()
}}

Code source

• Source de démonstration officielle

• Source du plugin