zrb-vue

基于 VUE 的前端开发基础框架

# zrb-event

全局消息插件。

安装

```javascript
import Vue from 'vue'
import { ZrbEventPlugin } from 'zrb-vue'

Vue.use(ZrbEventPlugin)
```

发送消息

this.$zrbEmit('hello')

接收消息

this.$zrbOn('hello', () => {})

axios

支持通过拦截器添加请求参数，处理业务逻辑错误。

创建实例

import Vue from 'vue'
import { ZrbAxiosPlugin } from 'zrb-vue'

Vue.use(ZrbAxiosPlugin)
// 注意不需要new，返回的不是Class，是工厂方法
let name = 'zrb-axios-1'
let zrbAxios = Vue.ZrbAxios({ name })

在 Vue 的组件中使用之前创建实例。

let name = 'zrb-axios-1'
let zrbAxios = this.ZrbAxios(name)

不通过 Vue 使用之前创建的实例。

import { ZrbAxios } from 'zrb-vue'
let name = 'zrb-axios-1'
let zrbAxios = ZrbAxios.ins(name)

指定拦截规则，给请求添加参数

let rule = Vue.ZrbAxios.newInterceptorRule({
  requestParams: new Map([['access_token', 'validaccesstoken']]),
})
let zrbAxios = ZrbAxios.ins({ rules: [rule] })

参数可以通过函数提供，并且支持放回 promise，例如：

requestParams: new Map([
  [
    'access_token',
    function () {
      return 'validaccesstoken'
    },
  ],
])

指定拦截规则，给请求添加头

let rule = Vue.ZrbAxios.newInterceptorRule({
  requestHeaders: new Map([['Authorization', 'Bearer valid-jwt']]),
})
let zrbAxios = ZrbAxios.ins({ rules: [rule] })

请求头参数可以通过函数提供，并且支持放回 promise，例如：

requestHeaders: new Map([
  [
    'Authorization',
    function () {
      return 'Bearer valid-jwt'
    },
  ],
])

指定拦截规则，重发请求

let rule = Vue.ZrbAxios.newInterceptorRule({
  onRetryAttempt: (res, rule) => {
    return new Promise((resolve) => {
      rule.requestParams.set('access_token', 'new_access_token')
      resolve(true)
    })
  },
})
let zrbAxiso = Vue.ZrbAxios({ rules: [rule] })

如果有多个重发请求规则，只要任意一个发生异常（reject），就不进行重发；如果有任意一个需要重发（返回 resolve(true）)，就进行重发。

只允许重发一次。

指定拦截规则，业务逻辑错误处理（返回结果中 code 不等于 0）

let rule = Vue.ZrbAxios.newInterceptorRule({
  onResultFault: (res, rule) => {
    return new Promise((resolve) => {
      console.log('发生业务逻辑错误', res.data)
      resolve(true)
    })
  },
})
let zrbAxiso = Vue.ZrbAxios({ rules: [rule] })

业务逻辑错误拦截器处理返回结果后，zrb-vue 仍然会继续将执行 Promise.reject(res.data)，调用方应该使用 catch 进行接收。

使用方法参考测试用例：zrb-axios.spec.js

发起请求的接口和 axios 一致，参考：https://github.com/axios/axios

指定连接规则，响应阶段失败处理

rule = Vue.ZrbAxios.newInterceptorRule({
  onResponseRejected: (err, rule) => {
    // 修复错误，或者转发错误
  },
})
let zrbAxios = Vue.ZrbAxios({ rules: [rule] })

响应失败处理不是对业务错误的处理（参考：onResultFault）,是在响应阶段对发生的异常的处理，例如：希望对调用请求过程中发生的异常做统一处理（用统一的弹出框显示），那么就可以在这里实现。但是，需要注意这是 promise 调用链中的一环，调用仍然会继续，只是插入了一个处理环节。

执行批量任务类（Batch）

管理需要按批次执行的任务，例如：分页访问数据。

属性

| 属性 | 说明 | 类型 | | ---------- | --------------------------------------------- | -------- | | action | 需要按批次执行的方法 | function | | actionArgs | 按批次执行方法的参数 | array | | page | 批量任务的页号 | number | | size | 每一批的任务数量 | number | | total | 全部任务数量 | number | | execPage | 将要执行的批量任务页号，执行成功后赋值给 page | number |

方法

constructor

let batch = new Batch(fnAction, ..., argN)

| 参数 | 说明 | 类型 | | -------- | ------------------------------------------ | -------- | | fnAction | 需要批量执行的方法，返回值必须为 Promise。 | function | | argN | 执行批量方法需要的参数。 | any |

如果 fnAction 的执行需要依赖特定的上下文，应该在传入前进行绑定。请参考单元测试中的用户。

next

执行下一个批次。

goto

执行指定批次。

| 参数 | 说明 | 类型 | | ---------- | ---------- | ------ | | targetPage | 批次编号。 | number |

exec

执行当前批次。该方法调用传入的批量方法，并在参数列表