vue apis
1.0.0
axios と統合された vue プラグイン。チェーン プログラミングを使用して API を構築し、リクエスト インスタンスを Promise として返します。API の構築方法とその参照方法が簡略化されています。
axios と統合された vue プラグイン。チェーン プログラミングを使用して 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)
| 関数 | 例 | 口論 | 説明 |
|---|---|---|---|
| セットURL | setUrl('https://baidu.com') | (URL: 文字列) | リクエストURLアドレスを設定する |
| セットデータ | setData({ a: 1}) | (データ:オブジェクト) | ポストボディオブジェクトを設定します |
| setParams | setParams({ t: Date.now() }) | (パラメータ: オブジェクト) | リクエストURLクエリを設定する |
| setHeaders | setHeaders({ 'コンテンツタイプ': 'アプリケーション/json' }) | (ヘッダー: オブジェクト) | リクエストヘッダーを設定する |
| setTimeout | setTimeout(10000) | (タイムアウト:数値) | リクエストのタイムアウトを設定する |
| setCustomOptions | setCustomOptions({ responseType: 'stream' }) | (オプション: オブジェクト、クリア: ブール値) | カスタムオプションを設定する |
| オプションキー | タイプ | デフォルト値 | 説明 |
|---|---|---|---|
| アピス | 物体 | {} | APIセット |
| 表示読み込み中 | 関数 | 未定義 | レイアウト関数の読み込みを表示 |
| 隠す読み込み中 | 関数 | 未定義 | レイアウト関数の読み込みを非表示にする |
| インターセプター | インターセプターオブジェクト | 未定義 | リクエストやレスポンスが then や catch によって処理される前にインターセプトできます。 |
| 分野 | タイプ | 説明 |
|---|---|---|
| リクエスト | リクエストオブジェクト/関数 | インスタンスが「Function」の場合、インターセプターへの「then」コールバックになります。 |
| 応答 | 応答オブジェクト/関数 | インスタンスが「Function」の場合、インターセプターへの「then」コールバックになります。 |
| 関数 | 例えば |
|---|---|
| それから | (config) => { 構成を返す } |
| キャッチ | (エラー) => { return Promise.reject(error); |
| 関数 | 例えば |
|---|---|
| それから | (応答) => { 応答を返す } |
| キャッチ | (エラー) => { return Promise.reject(error); |
main.js
import Vue from 'vue'import VueApis from 'vue-apis'import Api from './api'Vue.use(VueApis, {
API: API、
showLoading: () => {console.log('showLoading')
}、
HideLoading: () => {console.log('hideLoading')
}、
インターセプター: {request: { then(config) {// リクエストが送信される前に処理しますreturn config; }, catch(error) {// リクエストで処理しますerrorreturn Promise.reject(error) }}, return: { then( return) {// レスポンスで何かを行う datareturn response; }, catch(error) {// レスポンスで何かを行う errorreturn 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( { タイムスタンプ: Date.now()}).setHeaders({ 認証: `Bearer ${Date.now()}`}).request()
}} デフォルトの $api をエクスポートホーム.vue
<テンプレート>
<div v-html="readme"></div></template><スクリプト>
デフォルトのエクスポート {data () { return {readme: '' }},async created () { const res = await this.$apis.readme() this.readme = res}
}</script>アピ
const $api = {
formDataRequest (formData) {return new ApiOptions().setUrl(URL).setMethod(ApiMethod.POST).setData(formData).request()
}}FormData インスタンスの作成
const formData = new window.FormData()formData.append(key, value)// Requestthis.$apis.formDataRequest(formData)
const $api = {
formDataRequest (formData) {return new ApiOptions().setUrl(URL).setMethod(ApiMethod.POST).setData(formData).setCustomOptions({ url: `https://baidu.com`, // 無効なデータ: {} , // 無効なパラメータ: {}, // 無効なヘッダー: {}, // 無効なメソッド: {}, // 無効なresponseType: 'stream' // 有効}, /* はすべてクリアされます最初はカスタム オプション */ false).request()
}}公式デモソース
プラグインソース
