wepy plugin axios

wepy-plugin-axios

بداية، شكرًا لمؤلفي axios وwepy على توفير مثل هذه المكتبات الرائعة!

هذا مكون إضافي wepy يسمح لك باستخدام axios في البرامج الصغيرة

وثائق اكسيوس | وثائق wepy

عند إنشاء برنامج صغير، كانت وظائف وظيفة wx.request المضمنة في البرنامج الصغير محدودة للغاية. حتى wepy.request هو مجرد تغليف بسيط للوظيفة الأصلية ولا يمكنه توفير وظائف متقدمة مثل axios. يسمح باستخدام معظم وظائف المحاور في البرامج الصغيرة.

مع إبقاء واجهة برمجة التطبيقات (API) قريبة قدر الإمكان من واجهة برمجة التطبيقات الأصلية لـ axios، يتضمن هذا المكون الإضافي wx.request و wx.uploadFile و wx.downloadFile كما يوفر أيضًا وظيفة قائمة انتظار الطلبات، مما يرفع حد إرسال ما يصل إلى 5 طلبات في نفس الوقت.

إذا أعجبك، أعطه نجمة وادعمه؟ هل نرحب بالقضايا والعلاقات العامة؟

ثَبَّتَ

استخدم npm أو الغزل لتثبيت axios وwepy-plugin-axios في نفس الوقت

 npm تثبيت axios wepy-plugin-axios --save
غزل إضافة axios wepy-plugin-axios

إعدادات

ملاحظة: يجب استخدام هذا المكون الإضافي مع wepy . تستخدم الأمثلة التالية أحدث إصدار من wepy. إذا كنت لا تعرف كيفية استخدام wepy أو axios، فيرجى قراءة الوثائق الخاصة بها أولاً.

1. قم بتكوين wepy

   أضف عنصر axios إلى plugins لـ wepy.config.js لا يحتوي البرنامج الإضافي على خيارات، فقط استخدم كائنًا فارغًا كخيار.

    وحدة التصدير = {
   // ...مكونات إضافية أخرى للتكوين: {// ...مكونات إضافية أخرى axios: {}
   }}

   ملاحظة: إذا كنت تستخدم التكوين الافتراضي الذي تم إنشاؤه بواسطة wepy، فهناك الكود التالي في نهاية الملف:

    Module.exports.plugin = {
   uglifyjs: {// ...
   },
   صورة مين: {// ...
   }}

   هنا تحتاج أيضًا إلى إدراج سطر من axios: {} ، وإلا سيحدث خطأ عند إنشاء نسخة الإصدار.

2. تكوين المحاور

   قدم وظيفة لإنشاء محول من wepy-plugin-axios/dist/adapter ، ثم قم بتمرير مثيل axios إلى هذه الوظيفة للحصول على محول

   استخدم axios.defaults أو axios.create لتعيين خصائص adapter axios (يوصى باستخدام الأخير)

    استيراد المحاور من 'axios'import wepyAxiosAdapter من 'wepy-plugin-axios/dist/adapter'// يجب تنفيذ تهيئة المحول قبل أي axios.create محول const = wepyAxiosAdapter(axios)تصدير axios.create الافتراضي({
   محول: محول // هذه الخاصية هي المفتاح لاستخدام axios في برنامج صغير // ...خصائص أخرى})

الاستخدام

يفترض المثال التالي أن التكوين قد اكتمل وفقًا للمحتوى أعلاه.

إرسال طلب عادي

 // أرسل طلب GET عادي axios.get('https://huajingkun.com/api/userinfo')//أرسل بيانات json axios.request({
الطريقة: "نشر"،
عنوان URL: "https://huajingkun.com/api/userinfo"،
البيانات: {الاسم المستعار: '233'
}})// أرسل بيانات urlencoded axios.post('https://huajingkun.com/api/userinfo', { اللقب: '233' }, {
الرؤوس: {'نوع المحتوى': 'application/x-www-form-urlencoded'
}})

تحميل الملفات

إذا ظهر الحقل $upload في بيانات طلب POST، يعتبر هذا الطلب بمثابة طلب رفع ملف.

 axios.post('https://huajingkun.com/api/avatar', {
$upload: {name: 'avatar',filePath: 'wxfile://sometempfilepath' // نتائج من واجهات مثل wx.chooseImage },
// ...تم إرسال بيانات أخرى معًا})

تنزيل الملف

إذا كان responseType عبارة عن file في طلب GET، فسيتم اعتبار هذا الطلب بمثابة طلب ملف تنزيل، ويتم إرجاع المسار المؤقت للملف (راجع وثائق تطوير البرنامج المصغر للحصول على التفاصيل).

ملاحظة: لا يمكن استخدام بروتوكول http إلا في الوقت الحالي

 axios.get('http://www.baidu.com', { نوع الاستجابة: 'ملف' }).then(response => {
console.log(response.data) // إخراج المسار المؤقت للملف الذي تم تنزيله بنجاح})

خيارات الطلب

يوفر هذا المكون الإضافي الدعم لمعظم خيارات axios، ويقوم أيضًا بإجراء بعض التعديلات بناءً على واجهة برمجة تطبيقات axios الأصلية:

خيارات غير مدعومة

ملاحظة: نظرًا لوظيفة الطلب المحدودة للبرنامج الصغير، فإن الخيارات التالية غير مدعومة. إذا ظهرت الخيارات التالية أثناء الاستخدام، فسيتم تجاهلها. يمكن استخدام الوظائف غير الموجودة في هذه القائمة.

• timeout

• withCredentials

• auth

• xsrfCookieName

• xsrfHeaderName

• onUploadProgress

• onDownloadProgress

• maxContentLength

• maxRedirects

• httpAgent

• httpsAgent

• proxy

خيارات محدودة

• url : يجب تحديد البروتوكول، ويمكن أن يكون http أو https فقط. يمكن استخدام http فقط لتنزيل الملفات

• method : يمكن أن تكون فقط طريقة يدعمها البرنامج المصغر (راجع وثائق تطوير البرنامج المصغر للحصول على التفاصيل)

• responseType : يمكن أن يكون واحدًا فقط من json و text و file

إرجاع المحتوى

المحتوى الذي تم إرجاعه مشابه للمحتوى الذي تم إرجاعه من axios:

 {
// بيانات الاستجابة التي يرسلها الخادم // لطلبات تنزيل الملفات، يكون محتوى حقل البيانات هو المسار المؤقت لبيانات الملف: object string |.

// حالة رمز استجابة HTTP: الرقم،

// رؤوس HTTP التي يتم إرجاعها بواسطة الخادم. جميع أسماء الرؤوس مكتوبة بأحرف صغيرة // بالنسبة لطلبات التحميل أو التنزيل، يكون حقل الرؤوس دائمًا كائنًا فارغًا (لا يوفر التطبيق الصغير محتوى الرأس الذي تم إرجاعه)
العناوين: كائن،

// خيارات الطلب المستخدمة بواسطة axios config: object،

// قم بتمرير المحتوى المحدد لطلب wx.request أو wx.uploadFile أو wx.downloadFile: object}

يلاحظ

نظرًا لأن نظام المكونات الإضافية الحالي لـ wepy ليس مثاليًا بدرجة كافية، فإن هذا المكون الإضافي يستخدم طريقة "قذرة" نسبيًا للسماح باستخدام axios في wepy:

تعديل الملف المصدر axios مباشرة

تم حذف تعريف المحولات في الملف المصدر axios lib/defaults.js في lib/plugin.js نظرًا لأن axios يدعم كلاً من المتصفحات وNode.js، فلا يمكن لـ wepy تجاهل الوحدة الأصلية لـ Node.js عند التعبئة يتسبب في فشل العبوة.

ومع ذلك، يمكن للمكون الإضافي wepy حاليًا تعديل الملف المصدر فقط في الخطوة الأخيرة من التعبئة، ولا يمكنه تعديل معلومات التبعية، لذلك لا يمكن تجاهل التعليمات البرمجية المعدة لـ Node.js، لذلك لا يمكن حذفها إلا بوقاحة بالمناسبة، تم كسر الكود بواسطة المتصفح، لأنه لا يمكن استخدام XMLHttpRequest في البرامج الصغيرة، ويجب استخدام محول مخصص بالكامل بعد الحذف، ويمكن أيضًا تقليل حجم الملف.

يعني هذا التعديل أنه إذا كان رمز التطبيق الصغير الخاص بك يشارك مجلد node_modules مع رمز آخر، فلن تتمكن التعليمات البرمجية الأخرى من استخدام axios بشكل طبيعي.

تطوير واختبار المكونات الإضافية

نظرًا لأن wepy لا يحتوي حاليًا على وظيفة اسم مستعار، يمكنك فقط نسخ مجلد المشروع بأكمله إلى مجلد node_modules الخاص بالمشروع الاختباري أثناء التطوير، وتغيير wepy-plugin-axios/dist/adapter إلى wepy-plugin-axios/lib/adapter.js

قم بتشغيل الأمر التالي أثناء الترجمة للحصول على الملف النهائي في مجلد dist :

 بناء تشغيل npm

رخصة

معهد ماساتشوستس للتكنولوجيا