vue apis
1.0.0
مكون إضافي vue متكامل مع axios. قم ببناء واجهة برمجة التطبيقات باستخدام البرمجة المتسلسلة وإرجاع مثيل الطلب كوعد. تبسيط رائع لكيفية إنشاء واجهات برمجة التطبيقات وكيفية الرجوع إليها.
مكون إضافي vue متكامل مع axios. استخدم البرمجة المتسلسلة لبناء واجهة برمجة التطبيقات (API) وإرجاع نسخة الطلب باستخدام Promise. إنه يبسط إلى حد كبير طريقة بناء واجهة برمجة التطبيقات والطريقة المرجعية (الرجوع من خلال هذا.$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)
| وظيفة | مثال | دعوى | وصف |
|---|---|---|---|
| setUrl | setUrl('https://baidu.com') | (عنوان URL: سلسلة) | تعيين عنوان URL للطلب |
| setData | مجموعة البيانات ({أ: 1}) | (البيانات: كائن) | تعيين كائن الجسم آخر |
| setParams | setParams({ ر: Date.now() }) | (المعاملات: كائن) | تعيين استعلام عنوان URL للطلب |
| setHeaders | setHeaders({ 'نوع المحتوى': 'application/json' }) | (العناوين: كائن) | تعيين رؤوس الطلب |
| setTimeout | ضبط المهلة (10000) | (المهلة:الرقم) | تعيين مهلة الطلب |
| setCustomOptions | setCustomOptions({ ResponseType: 'stream' }) | (الخيارات: كائن، واضح: منطقي) | ضبط الخيارات المخصصة |
| مفتاح الخيار | يكتب | القيمة الافتراضية | وصف |
|---|---|---|---|
| أبيس | هدف | {} | مجموعة API |
| showLoading | وظيفة | غير محدد | إظهار وظيفة تخطيط التحميل |
| hideLoading | وظيفة | غير محدد | إخفاء وظيفة تخطيط التحميل |
| اعتراضية | InterceptorObject | غير محدد | يمكنك اعتراض الطلبات أو الاستجابات قبل أن يتم التعامل معها بحلول ذلك الوقت أو التقاطها. |
| مجال | يكتب | وصف |
|---|---|---|
| طلب | طلب الكائن/الوظيفة | عندما يكون المثيل هو "Function"، فهو عبارة عن رد اتصال "ثم" للمعترض |
| إجابة | كائن الاستجابة/الوظيفة | عندما يكون المثيل هو "Function"، يكون بمثابة رد اتصال "ثم" للمعترض |
| وظيفة | على سبيل المثال |
|---|---|
| ثم | (التكوين) => { إرجاع التكوين } |
| يمسك | (خطأ) => { إرجاع Promise.reject(خطأ); |
| وظيفة | على سبيل المثال |
|---|---|
| ثم | (الاستجابة) => {رد الاستجابة} |
| يمسك | (خطأ) => { إرجاع Promise.reject(خطأ); |
main.js
استيراد Vue من 'vue'استيراد VueApis من 'vue-apis'استيراد واجهة برمجة التطبيقات من './api'Vue.use(VueApis, {
واجهات برمجة التطبيقات: واجهة برمجة التطبيقات،
showLoading: () => {console.log('showLoading')
},
إخفاء التحميل: () => {console.log('hideLoading')
},
اعتراضات: {request: { ثم (config) {// افعل شيئًا قبل إرسال الطلبreturn config }، Catch(error) {// افعل شيئًا مع الطلب errorreturn Promise.reject(error }}, Response: { ثم( استجابة) {// افعل شيئًا باستخدام استجابة datareturn Response }، Catch(error) {// افعل شيئًا باستخدام الاستجابة errorreturn Promise.reject(error }});
}})api.js
استيراد { ApiOptions, ApiMethod } من 'vue-apis' const $api = {
التمهيدي () {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: '' }}، إنشاء غير متزامن () { const res = انتظار هذا.$apis.readme() this.readme = res}
</script>واجهة برمجة التطبيقات
ثابت $api = {
formDataRequest (formData) {return new ApiOptions().setUrl(URL).setMethod(ApiMethod.POST).setData(formData).request()
}}إنشاء مثيل FormData
const formData = نافذة جديدة.FormData()formData.append(key, value)// Requestthis.$apis.formDataRequest(formData)
ثابت $api = {
formDataRequest (formData) {return new ApiOptions().setUrl(URL).setMethod(ApiMethod.POST).setData(formData).setCustomOptions({ url: `https://baidu.com`, // بيانات غير صالحة: {} ، // معلمات غير صالحة: {}، // رؤوس غير صالحة: {}، // طريقة غير صالحة: {}، // نوع استجابة غير صالح: 'دفق' // صالح}، /* واضح الكل الخيارات المخصصة في البداية */ false).request()
}}المصدر التجريبي الرسمي
مصدر البرنامج المساعد
