vue apis

vue-apis

• Un complemento de vue integrado con axios. Cree la API utilizando programación en cadena y devuelva la instancia de solicitud como una Promesa. Una buena simplificación de cómo se crean las API y cómo se hace referencia a ellas.

• Un complemento de vue integrado con axios. Utilice programación en cadena para crear la API y devolver la instancia de solicitud con Promise. Simplifica enormemente la forma de construir la API y la forma de referencia (haciendo referencia a través de this.$apis.apiName).

Soporte del navegador

Lo último ✔	Lo último ✔	Lo último ✔	Lo último ✔	Lo último ✔	11 ✔

Instalación

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

Uso

Importar

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

Vue.use(VueApis, options)

API

función	ejemplo	argumento	descripción
establecer URL	establecerUrl('https://baidu.com')	(url: cadena)	establecer la dirección URL de solicitud
establecer datos	establecerDatos({ a: 1})	(datos: objeto)	establecer objeto del cuerpo de la publicación
establecer parámetros	setParams({ t: Fecha.ahora() })	(parámetros: objeto)	establecer consulta de URL de solicitud
establecer encabezados	setHeaders({ 'tipo de contenido': 'aplicación/json' })	(encabezados: Objeto)	establecer encabezados de solicitud
establecer tiempo de espera	establecer tiempo de espera (10000)	(tiempo de espera:Número)	establecer el tiempo de espera de la solicitud
establecer opciones personalizadas	setCustomOptions({ tipo de respuesta: 'transmisión' })	(opciones: Objeto, claro: booleano)	establecer opciones personalizadas

Opciones

tecla de opción	tipo	valor predeterminado	descripción
apis	objeto	{}	conjunto de API
mostrarCargando	función	indefinido	mostrar la función de diseño de carga
ocultarCargando	función	indefinido	ocultar la función de diseño de carga
interceptores	Objeto interceptor	indefinido	Puede interceptar solicitudes o respuestas antes de que sean manejadas o capturadas.

Objeto interceptor

campo	tipo	descripción
pedido	SolicitarObjeto/Función	Cuando la instancia es 'Función', es una devolución de llamada 'luego' al interceptor
respuesta	Objeto/Función de respuesta	Cuando la instancia es 'Función', es una devolución de llamada 'luego' al interceptor

Objeto de solicitud

Función	p.ej.
entonces	(configuración) => {configuración de retorno}
atrapar	(error) => { return Promise.reject(error });

Objeto de respuesta

Función	p.ej.
entonces	(respuesta) => { devolver respuesta }
atrapar	(error) => { return Promise.reject(error });

Ejemplo

• principal.js

 importar Vue desde 'vue'importar VueApis desde 'vue-apis'importar Api desde './api'Vue.use(VueApis, {
API: API,
mostrarCarga: () => {console.log('mostrarCarga')
},
ocultarCarga: () => {console.log('ocultarCarga')
},
interceptores: {solicitud: {entonces(config) {// Hacer algo antes de que la solicitud sea enviadareturn config }, catch(error) {// Hacer algo con la solicitud errorreturn Promise.reject(error}}, respuesta: {entonces( respuesta) {// Hacer algo con la respuesta datareturn respuesta }, catch(error) {// Hacer algo con la respuesta errorreturn Promise.reject(error }}
}})

• api.js

 importar {ApiOptions, ApiMethod} desde '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( {marca de tiempo: Date.now()}).setHeaders({ Autorización: `Portador ${Fecha.ahora()}`}).request()
}}exportar $api predeterminado

• casa.vue

 <plantilla>
<div v-html="léame"></div></template><script>
exportar {datos predeterminados () { return {léame: '' }},async creado () { const res = await this.$apis.readme() this.readme = res}
}</script>

Datos de formulario

• API

 constante $api = {
formDataRequest (formData) {devolver nuevo ApiOptions().setUrl(URL).setMethod(ApiMethod.POST).setData(formData).request()
}}

• Crear instancia de FormData

 const formData = nueva ventana.FormData()formData.append(clave, valor)// Requestthis.$apis.formDataRequest(formData)

Opciones personalizadas

 constante $api = {
formDataRequest (formData) {return new ApiOptions().setUrl(URL).setMethod(ApiMethod.POST).setData(formData).setCustomOptions({ url: `https://baidu.com`, // datos no válidos: {} , // parámetros no válidos: {}, // encabezados no válidos: {}, // método no válido: {}, // tipo de respuesta no válido: 'stream' // válido}, /* está claro todo opciones personalizadas al principio */ false).request()
}}

Código fuente

• Fuente de demostración oficial

• Fuente del complemento