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

OSCHINA-MIRROR/changeden-vue-apis

Присоединиться к Gitlife
Откройте для себя и примите участие в публичных проектах с открытым исходным кодом с участием более 10 миллионов разработчиков. Приватные репозитории также полностью бесплатны :)
Присоединиться бесплатно
Клонировать/Скачать
README.md 6.1 КБ
Копировать Редактировать Web IDE Исходные данные Просмотреть построчно История
gitlife-traslator Отправлено 28.11.2024 12:11 3698f6e

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 )

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

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