1 В избранное 0 Ответвления 0

OSCHINA-MIRROR/changeden-vue-apis

Присоединиться к Gitlife
Откройте для себя и примите участие в публичных проектах с открытым исходным кодом с участием более 10 миллионов разработчиков. Приватные репозитории также полностью бесплатны :)
Присоединиться бесплатно
Клонировать/Скачать
Внести вклад в разработку кода
Синхронизировать код
Отмена
Подсказка: Поскольку Git не поддерживает пустые директории, создание директории приведёт к созданию пустого файла .keep.
Loading...
README.md

Vue-apis

NPM version NPM download NPM download

  • Плагин Vue, интегрированный с axios. Создаёт API с использованием цепного программирования и возвращает экземпляр запроса как Promise. Значительно упрощает процесс создания API и способ их использования (через this.$apis.apiName).

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

Браузер Поддержка
Chrome Последняя версия
Firefox Последняя версия
Safari Последняя версия
Opera Последняя версия
Edge Последняя версия
IE 11

Browser Matrix

Установка

npm install vue-apis
// или
yarn add vue-apis

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

Импорт

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

Vue.use(VueApis, options)

Api

Функция Пример Аргумент Описание
setUrl setUrl('https://baidu.com') (url: String) Устанавливает адрес URL запроса
setData setData({ a: 1}) (data: Object) Устанавливает объект тела POST-запроса
setParams setParams({ t: Date.now() }) (params: Object) Устанавливает параметры запроса URL
setHeaders setHeaders({ 'content-type': 'application/json' }) (headers: Object) Устанавливает заголовки запроса
setTimeout setTimeout(10000) (timeout: Number) Устанавливает время ожидания запроса
setCustomOptions setCustomOptions({ responseType: 'stream' }) (options: Object, clear: boolean) Устанавливает пользовательские опции

Опции

Ключ опции Тип Значение по умолчанию Описание
apis object {} Набор API
showLoading function undefined Функция для отображения макета загрузки
hideLoading function undefined Функция для скрытия макета загрузки
interceptors InterceptorObject undefined Можно перехватывать запросы или ответы перед их обработкой then или catch

InterceptorObject

Поле Тип Описание
request RequestObject / Function Если экземпляр — функция, это обратный вызов «then» для перехватчика
response ResponseObject / Function Если экземпляр — функция, это обратный вызов «then» для перехватчика
RequestObject
Функция Например
then (config) => { return config; }
catch (error) => { return Promise.reject(error); }
ResponseObject
Функция Например
then (response) => { return response; }
catch (error) => { return Promise.reject(error); }

Пример

  • main.js
import Vue from 'vue'
import VueApis from 'vue-apis'
import Api from './api'

Vue.use(VueApis, {
  apis: Api,
  showLoading: () => {
    console.log('showLoading')
  },
  hideLoading: () => {
    console.log('hideLoading')
  },
  interceptors: {
    request: {
      then(config) {
        // Сделать что-то перед отправкой запроса
        return config;
      },
      catch(error) {
        // Сделать что-то с ошибкой запроса
        return Promise.reject(error);
      }
    },
    response: {
      then(response) {
        // Сделать что-то с данными ответа
        return response;
      },
      catch(error) {
        // Сделать что-то с ошибкой ответа
        return 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() } }

export default $api


**home.vue**

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

FormData

  • Api
const $api = {
  formDataRequest (formData) {
    return new ApiOptions()
      .setUrl(URL)
      .setMethod(ApiMethod.POST)
      .setData(formData)
      .request()
  }
}
  • Create FormData Instance
const formData = new window.FormData()
formData.append(key, value)

// Request
this.$apis.formDataRequest(formData)

Custom Options

const $api = {
  formDataRequest (formData) {
    return new ApiOptions()
      .setUrl(URL)
      .setMethod(ApiMethod.POST)
      .setData(formData)
      .setCustomOptions({
        url: `https://baidu.com`, // invalid
        data: {}, // invalid
        params: {}, // invalid
        headers: {}, // invalid
        method: {}, // invalid
        responseType: 'stream' // valid
      }, /* is clear all custom options at first */ false)
      .request()
  }
}

Source Code

Комментарии ( 0 )

Вы можете оставить комментарий после Вход в систему

Введение

Это плагин Vue, который интегрирует Axios. Он позволяет создавать API с помощью цепочечного программирования и возвращает экземпляр запроса через Promise. Значительно упрощает способ создания API и способ его вызова (через this.$apis.apiName). Развернуть Свернуть
MIT
Отмена

Обновления

Пока нет обновлений

Участники

все

Недавние действия

Загрузить больше
Больше нет результатов для загрузки
1
https://api.gitlife.ru/oschina-mirror/changeden-vue-apis.git
git@api.gitlife.ru:oschina-mirror/changeden-vue-apis.git
oschina-mirror
changeden-vue-apis
changeden-vue-apis
master