vue axios interceptors

vue-axios-pencegat

Tangkap dan tangani kesalahan ajax secara global saat menggunakan Axios dengan Vue .

Instalasi

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' ) ;

Penggunaan

Paket ini mendaftarkan bus peristiwa global baru yang disebut intercepted pada objek window dan mengeluarkan beberapa peristiwa di dalamnya ketika panggilan ajax menyebabkan kesalahan. Anda dapat dengan mudah mendengarkan kejadian ini untuk membangun alur kerja penanganan kesalahan yang lancar, misalnya dalam komponen global yang bertanggung jawab untuk menampilkan pesan kesalahan:

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

Anda juga dapat mendengarkan kode status dan kategori respons tertentu, misalnya jika Anda ingin menangani respons 4xx secara berbeda dari respons 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 => {
  // 
} ) ;

Untuk daftar lengkap kode status, kunjungi https://httpsstatuses.com/.

Menggunakan paket ini dengan Laravel

Jika Anda menggunakan Laravel >=5.5 sebagai backend, Anda beruntung. Jika server Anda mengembalikan respons 422 (biasanya kesalahan validasi), paket akan secara otomatis mengurai kegagalan yang dikembalikan ke dalam objek nilai kunci yang dapat diulang yang dapat Anda akses di data.body . Ini jauh lebih mudah digunakan untuk menampilkan semua pesan atau mereferensikan satu bidang kesalahan dibandingkan dengan struktur pesan kesalahan asli.