Download vue apis - download do código-fonte vue apis

vue apis

Outras categorias

1.0.0

Baixar

vue-apis

Um plug-in vue integrado com axios. Construa a API usando programação em cadeia e retorne a instância da solicitação como uma promessa. Uma boa simplificação de como as APIs são construídas e como são referenciadas.
Um plug-in vue integrado ao axios. Use programação em cadeia para construir a API e retornar a instância de solicitação com Promise. Isso simplifica muito a forma de construção da API e a forma de referência (referenciando através de this.$apis.apiName).

Suporte ao navegador


Últimas ✔	Últimas ✔	Últimas ✔	Últimas ✔	Últimas ✔	11✔

Instalando

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

função	exemplo	argumento	descrição
definirUrl	setUrl('https://baidu.com')	(url: String)	definir endereço de URL de solicitação
definir dados	setData({a: 1})	(dados: Objeto)	definir objeto do corpo da postagem
setParams	setParams({ t: Date.now() })	(parâmetros: objeto)	definir consulta de URL de solicitação
definirHeaders	setHeaders({ 'tipo de conteúdo': 'aplicativo/json' })	(cabeçalhos: Objeto)	definir cabeçalhos de solicitação
setTimeout	setTimeout(10000)	(tempo limite: Número)	definir tempo limite de solicitação
definirCustomOptions	setCustomOptions({responseType: 'stream' })	(opções: Objeto, claro: booleano)	definir opções personalizadas

Opções

chave de opção	tipo	valor padrão	descrição
API	objeto	{}	conjunto de APIs
mostrarCarregando	função	indefinido	mostrar função de layout de carregamento
ocultarCarregando	função	indefinido	ocultar função de layout de carregamento
interceptadores	Objeto Interceptador	indefinido	Você pode interceptar solicitações ou respostas antes que elas sejam tratadas ou capturadas.

Objeto Interceptador

campo	tipo	descrição
solicitar	SolicitarObjeto/Função	Quando a instância é 'Function', é um retorno de chamada 'then' para o interceptor
resposta	Objeto/Função de Resposta	Quando a instância é 'Function', é um retorno de chamada 'then' para o interceptor

SolicitarObject

Função	por exemplo
então	(configuração) => {retornar configuração};
pegar	(erro) => { return Promise.reject(erro });

Objeto de resposta

Função	por exemplo
então	(resposta) => { retornar resposta }
pegar	(erro) => { return Promise.reject(erro });

Exemplo

principal.js

 importar Vue de 'vue'importar VueApis de 'vue-apis'importar API de './api'Vue.use(VueApis, {
APIs: API,
showLoading: () => {console.log('showLoading')
},
hideLoading: () => {console.log('hideLoading')
},
interceptadores: {request: { then(config) {// Faça algo antes que a solicitação seja sentreturn config }, catch(error) {// Faça algo com request errorreturn Promise.reject(error }}, resposta: { then( resposta) {// Faça algo com a resposta datareturn response }, catch(error) {// Faça algo com a resposta errorreturn Promise.reject(error }});
}})

API.js

 importar {ApiOptions, ApiMethod} de 'vue-apis' const $api = {
leia-me () {return new ApiOptions().setUrl(`https://raw.githubusercontent.com/Chans-Open-Source/vue-apis/master/README.md`).setMethod(ApiMethod.GET).setParams( { timestamp: Date.now()}).setHeaders({ Autorização: `Bearer ${Date.now()}`}).request()
}}exportar padrão $api

home.vue

 <modelo>
<div v-html="readme"></div></template><script>
exportar padrão {data () { return {readme: '' }},async criado () { const res = aguardar isto.$apis.readme() this.readme = res}
}</script>

Formulário de Dados

API

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

Criar instância FormData

 const formData = nova janela.FormData()formData.append(chave, valor)// Requestthis.$apis.formDataRequest(formData)

Opções personalizadas

 const $api = {
formDataRequest (formData) {return new ApiOptions().setUrl(URL).setMethod(ApiMethod.POST).setData(formData).setCustomOptions({ url: `https://baidu.com`, // dados inválidos: {} , // parâmetros inválidos: {}, // cabeçalhos inválidos: {}, // método inválido: {}, // responseType inválido: 'stream' // válido}, /* é claro tudo opções personalizadas primeiro */ false).request()
}}