vue apis Download - vue apis Quellcode herunterladen

vue apis

Andere Kategorien

1.0.0

Herunterladen

vue-apis

Ein in Axios integriertes Vue-Plug-in. Erstellen Sie die API mithilfe der Kettenprogrammierung und geben Sie die Anforderungsinstanz als Versprechen zurück. Eine schöne Vereinfachung, wie APIs erstellt werden und wie auf sie verwiesen wird.
Ein in Axios integriertes Vue-Plug-in. Verwenden Sie Kettenprogrammierung, um die API zu erstellen und die Anforderungsinstanz mit Promise zurückzugeben. Es vereinfacht die Erstellung der API und die Referenzierung (Referenzierung über this.$apis.apiName) erheblich.

Browser-Unterstützung


Neueste ✔	Neueste ✔	Neueste ✔	Neueste ✔	Neueste ✔	11 ✔

Installieren

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

Verwendung

Import

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

Vue.use(VueApis, options)

API

Funktion	Beispiel	Argument	Beschreibung
setUrl	setUrl('https://baidu.com')	(URL: String)	Legen Sie die URL-Adresse der Anfrage fest
setData	setData({ a: 1})	(Daten: Objekt)	Post-Body-Objekt festlegen
setParams	setParams({ t: Date.now() })	(Parameter: Objekt)	Anfrage-URL-Abfrage festlegen
setHeaders	setHeaders({ 'content-type': 'application/json' })	(Überschriften: Objekt)	Anforderungsheader festlegen
setTimeout	setTimeout(10000)	(timeout:Number)	Legen Sie das Anforderungszeitlimit fest
setCustomOptions	setCustomOptions({ ResponseType: 'stream' })	(Optionen: Objekt, klar: boolean)	Legen Sie benutzerdefinierte Optionen fest

Optionen

Optionstaste	Typ	Standardwert	Beschreibung
APIs	Objekt	{}	API-Set
anzeigenLaden	Funktion	undefiniert	Ladelayoutfunktion anzeigen
ausblendenLaden	Funktion	undefiniert	Funktion zum Laden des Layouts ausblenden
Abfangjäger	InterceptorObject	undefiniert	Sie können Anfragen oder Antworten abfangen, bevor sie bis dahin bearbeitet werden, oder abfangen.

InterceptorObject

Feld	Typ	Beschreibung
Anfrage	RequestObject/Funktion	Wenn es sich bei der Instanz um eine „Funktion“ handelt, handelt es sich um einen „Dann“-Rückruf an den Interceptor
Antwort	ResponseObject/Funktion	Wenn es sich bei der Instanz um eine „Funktion“ handelt, handelt es sich um einen „Dann“-Rückruf an den Interceptor

RequestObject

Funktion	z.B.
Dann	(config) => { return config;
fangen	(error) => { return Promise.reject(error);

ResponseObject

Funktion	z.B.
Dann	(Antwort) => { Antwort zurückgeben }
fangen	(error) => { return Promise.reject(error);

Beispiel

main.js

 Vue aus 'vue' importieren, VueApis aus 'vue-apis' importieren, Api aus './api' importieren'Vue.use(VueApis, {
API: API,
showLoading: () => {console.log('showLoading')
},
hideLoading: () => {console.log('hideLoading')
},
Interceptors: {request: { then(config) {// Tun Sie etwas, bevor die Anfrage gesendet wird. return config }, Catch(error) {// Machen Sie etwas mit der Anfrage errorreturn Promise.reject(error }}, Antwort: { then( Antwort) {// Etwas mit Antwortdaten tunreturn Response }, Catch(error) {// Etwas mit Antwort tun errorreturn Promise.reject(error }}
}})

api.js

 import { ApiOptions, ApiMethod } from 'vue-apis' const $api = {
readme () {return new ApiOptions().setUrl(`https://raw.githubusercontent.com/Chans-Open-Source/vue-apis/master/README.md`).setMethod(ApiMethod.GET).setParams( { timestamp: Date.now()}).setHeaders({ Authorization: `Bearer ${Date.now()}`}).request()
}}Standard $api exportieren

home.vue

 <Vorlage>
<div v-html="readme"></div></template><script>
export default {data () { return {readme: '' }},asynccreated () { const res = waiting this.$apis.readme() this.readme = res}
</script>

FormData

API

 const $api = {
formDataRequest (formData) {return new ApiOptions().setUrl(URL).setMethod(ApiMethod.POST).setData(formData).request()
}}

Erstellen Sie eine FormData-Instanz

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

Benutzerdefinierte Optionen

 const $api = {
formDataRequest (formData) {return new ApiOptions().setUrl(URL).setMethod(ApiMethod.POST).setData(formData).setCustomOptions({ url: `https://baidu.com`, // ungültige Daten: {} , // ungültige Parameter: {}, // ungültige Header: {}, // ungültige Methode: {}, // ungültiger ResponseType: 'stream' // gültig}, /* ist alles klar benutzerdefinierte Optionen zuerst */ false).request()
}}