vue axios interceptors

vue-axios-攔截器

將Axios與Vue結合使用時，全域擷取並處理 ajax 錯誤。

安裝

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

用法

該套件在window物件上註冊一個名為intercepted新全域事件總線，並在 ajax 呼叫導致錯誤時在其上發出多個事件。您可以輕鬆偵聽這些事件以建立流暢的錯誤處理工作流程，例如在負責顯示錯誤訊息的全域元件中：

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

您也可以偵聽特定的狀態代碼和回應類別，例如，如果您希望以不同於 5xx 回應的方式處理 4xx 回應：

 // 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上存取該物件。與原始錯誤訊息結構相比，顯示所有訊息或引用單一欄位錯誤更容易使用。