Загрузка vue apis - Загрузка исходного кода vue apis

vue apis

Другие категории

1.0.0

Скачать

vue-apis

Плагин vue, интегрированный с axios. Создайте API с помощью цепного программирования и верните экземпляр запроса в виде обещания. Хорошее упрощение построения API и способов обращения к ним.
Плагин vue, интегрированный с axios. Используйте цепное программирование для создания API и возврата экземпляра запроса с помощью Promise. Это значительно упрощает способ создания API и способ ссылки (ссылка через this.$apis.apiName).

Поддержка браузера


Последние ✔	Последние ✔	Последние ✔	Последние ✔	Последние ✔	11 ✔

Установка

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

Использование

Импорт

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

Vue.use(VueApis, options)

API

функция	пример	аргумент	описание
setUrl	setUrl('https://baidu.com')	(URL: строка)	установить URL-адрес запроса
setData	setData({а: 1})	(данные: Объект)	установить объект тела сообщения
setParams	setParams({t: Date.now() })	(параметры: Объект)	установить запрос URL-адреса запроса
setHeaders	setHeaders({ 'content-type': 'application/json' })	(заголовки: Объект)	установить заголовки запроса
setTimeout	setTimeout (10000)	(тайм-аут: число)	установить таймаут запроса
setCustomOptions	setCustomOptions ({ResponseType: 'поток'})	(опции: Объект, ясно: логическое значение)	установить пользовательские параметры

Параметры

ключ опции	тип	значение по умолчанию	описание
апис	объект	{}	набор API
показатьЗагрузка	функция	неопределенный	показать функцию макета загрузки
скрытьЗагрузка	функция	неопределенный	скрыть функцию макета загрузки
перехватчики	ПерехватчикОбъект	неопределенный	Вы можете перехватывать запросы или ответы до того, как они будут обработаны, или перехватывать их.

ПерехватчикОбъект

поле	тип	описание
запрос	ЗапросОбъект/Функция	Когда экземпляр имеет значение «Функция», это обратный вызов «то» для перехватчика.
ответ	Объект ответа/функция	Когда экземпляр имеет значение «Функция», это обратный вызов «то» для перехватчика.

ЗапросОбъект

Функция	например
затем	(конфигурация) => {вернуть конфигурацию;
ловить	(ошибка) => { return Promise.reject(ошибка });

Объект ответа

Функция	например
затем	(ответ) => {возврат ответа }
ловить	(ошибка) => { return Promise.reject(ошибка });

Пример

main.js

 импортировать Vue из 'vue'import VueApis из 'vue-apis'import Api из './api'Vue.use(VueApis, {
API: API,
showLoading: () => {console.log('showLoading')
},
скрытьLoading: () => {console.log('hideLoading')
},
перехватчики: {request: { then(config) {// Сделайте что-нибудь перед отправкой запросаreturn config; }, catch(error) {// Сделайте что-нибудь с запросом errorreturn Promise.reject(error }}, ответ: { then( ответ) {// Сделайте что-нибудь с ответом datareturn response }, catch(error) {// Сделайте что-нибудь с ответом errorreturn Promise.reject(error }};
}})

API.js

 import { ApiOptions, ApiMethod } из '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( { временная метка: Date.now()}).setHeaders({ Авторизация: `Bearer ${Date.now()}`}).request()
}}экспортировать $api по умолчанию

home.vue

 <шаблон>
<div v-html="readme"></div></template><script>
экспортировать по умолчанию {данные () { return {readme: '' }},async Created () { const res = await this.$apis.readme() this.readme = res}
</скрипт>

Формдата

API

 константа $api = {
formDataRequest (formData) {вернуть новый ApiOptions().setUrl(URL).setMethod(ApiMethod.POST).setData(formData).request()
}}

Создать экземпляр FormData

 const formData = новое окно.FormData()formData.append(ключ, значение)// Requestthis.$apis.formDataRequest(formData)

Пользовательские параметры

 константа $api = {
formDataRequest (formData) {return new ApiOptions().setUrl(URL).setMethod(ApiMethod.POST).setData(formData).setCustomOptions({ url: `https://baidu.com`, // неверные данные: {} , // недопустимые параметры: {}, // недопустимые заголовки: {}, // недопустимый метод: {}, // недопустимый тип ответа: 'stream' // действительный}, /* все очищено сначала пользовательские параметры */ false).request()
}}