vue axios interceptors

vue-axios-interceptors

يمكنك اكتشاف أخطاء ajax ومعالجتها عالميًا عند استخدام Axios مع Vue .

تثبيت

npm install vue-axios-interceptors --save
// or
yarn add vue-axios-interceptors

 // Make sure you import this package after you've imported Vue:
window . Vue = require ( 'vue' ) ;

require ( 'vue-axios-interceptors' ) ;

// Make sure the axios package is available globally on the window object:
window . axios = require ( 'axios' ) ;

الاستخدام

تسجل الحزمة ناقل حدث عالمي جديد يسمى intercepted على كائن window وتصدر عدة أحداث عليه عندما يؤدي استدعاء ajax إلى حدوث خطأ. يمكنك الاستماع بسهولة إلى هذه الأحداث لبناء سير عمل سلس لمعالجة الأخطاء، على سبيل المثال في مكون عام مسؤول عن عرض رسائل الخطأ:

 // ErrorMessages.vue
mounted ( ) {
    window . intercepted . $on ( 'response' , data => {
        console . log ( data ) ; // { status: 404, code: 'Not found', body: null }
        
        // Display the message.
    } ) ;
}

يمكنك أيضًا الاستماع إلى رموز الحالة وفئات الاستجابة المحددة، على سبيل المثال، إذا كنت ترغب في التعامل مع استجابات 4xx بشكل مختلف عن استجابات 5xx:

 // Listen for any intercepted responses.
window . intercepted . $on ( 'response' , data => {
  // 
} ) ;

// Listen for any intercepted responses under the Client Error category (4xx).
window . intercepted . $on ( 'response:client-error' , data => {
  // 
} ) ;

// Listen for any intercepted responses under the Server Error category (5xx).
window . intercepted . $on ( 'response:5xx' , data => {
  // 
} ) ;

// Listen for a specific status.
window . intercepted . $on ( 'response:404' , data => {
  // 
} ) ;

// Listen for a specific HTTP code.
window . intercepted . $on ( 'response:unprocessable-entity' , data => {
  // 
} ) ;

للحصول على قائمة كاملة برموز الحالة، تفضل بزيارة https://httpstatuses.com/.

استخدام هذه الحزمة مع Laravel

إذا كنت تستخدم Laravel >=5.5 كواجهة خلفية لديك، فأنت محظوظ. إذا أعاد خادمك استجابة 422 (عادةً خطأ في التحقق من الصحة)، فستقوم الحزمة تلقائيًا بتحليل حالات الفشل التي تم إرجاعها إلى كائن قيمة مفتاح قابل للتكرار يمكنك الوصول إليه على data.body . يعد هذا أسهل في الاستخدام لعرض كافة الرسائل أو الإشارة إلى خطأ حقل واحد مقارنةً ببنية رسالة الخطأ الأصلية.