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 วิธีนี้เป็นวิธีที่ง่ายกว่าในการใช้เพื่อแสดงข้อความทั้งหมดหรืออ้างอิงข้อผิดพลาดของฟิลด์เดียวมากกว่าโครงสร้างข้อความแสดงข้อผิดพลาดดั้งเดิม