vue axios interceptors下载 - vue axios interceptors源码下载

vue axios interceptors

其他类别

0.3.1

下载

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 => {
  // 
} ) ;