@zjxpcyc/use-async v1.0.1

use-async

在目前主流的 MVVM 框架, vue 或 react 中有一个通病或者痛点： 业务的逻辑被分散在各个文件中。

比如 react 如果跟 redux 搭配, 那么业务流程的控制，可能 redux 中有一部分, 涉及 state 的业务更新逻辑。 react 中有一部分, 涉及事件的响应逻辑。

很多的时候, 我们往往会强制要求, 业务逻辑必须怎么怎么写, 放到哪个文件里面。但是遇到异步的, 业务操作是连续的时候，这种规定往往不经意间就被打破。

比如有一种任务提交流程

1 -> 是否提交 ?

这种处理还好做, 非常简单, 一行代码估计就搞定

2 -> 选择提交模板

这种可能需要涉及事件处理, 需要响应用户的操作。 实际代码层面, 这个业务流程就断了。

3 -> 选择提交的说明

这种也是如此, 响应用户操作

4 -> 各种提参校验, 最后提交

上面列举的步骤其实很简答。但是涉及的变量和状态控制, 可能不少于 7-8 个。

如果再涉及到 组件生命周期 的处理, 代码只会更分散。往往一个流程，要翻遍几乎所有的核心文件目录, 什么 componet, store, services 等等。

因此 use-async 就应运而生了。当然 use-async 只是解决这个痛点的一种方案, 并不是万金油。使用之前，还需要开发者自己衡量一下。

安装

npm install -S @zjxpcyc/use-async

使用

import useAsync from '@zjxpcyc/use-async'

// 这里以伪代码的方式解决刚刚示例痛点
handleSubmit = async () => {
  // 1. 是否提交
  wait useAsync(

    // useAsync 有2个参数
    // 第一个是需要执行逻辑的函数
    // 该函数的第一个参数有 next, cancel 两个属性
    // next 是流程继续, cancel 是流程结束
    ({ next, cancel }, isSubmit) => {
      if (isSubmit) next();
    },
    
    // 第二个参数是一个 setter
    // 用来将你写的函数绑定到当前对象上, 以便后面事件绑定
    // 比如本例, handleConfirmModal 将会被如下的形式绑定
    // <Confirm onSubmit={(isSubmit) => { this.handleConfirmModal(isSubmit) }}>
    fn => (this.handleConfirmModal = fn)
  )

  // 2. 选择提交模板
  // 先打开弹窗
  this.setState({ showTemplate: true })

  // 这里演示里 useAsync 的第二种用法
  // 第一个参数是一个事件函数的名称, 第二个是当前组件
  // 也就是说 handleTemplateCheck 会在某个地方被定义
  // 支持这种方式的原因是, 可能业务逻辑跟基本的事件处理是不同文件
  // 这种方式会将原来的事件函数给替换掉, 但是不影响原来的代码逻辑
  // 同时新增一个对应的 Cancel 函数来处理相反的流程
  // 假设 handleTemplateCheck 是如下代码
  // handleTemplateCheck = ({next}, template) => { this.setState({ template, showTemplate: false }, next) }
  // 这个示例中 componentInstance 会被绑定一个 handleTemplateCheckCancel 方法
  wait useAsync('handleTemplateCheck', componentInstance)

  // 3. 提交文件说明
  this.setState({ showDesc: true })
  wait useAsync('handleDesChange', componentInstance)

  // 4. 验证提交
  // some code ...
}

上述演示, 很好的解决了因为异步逻辑造成的代码阻断. 同时也减少了代码耦合, 实现了关注点分离。 如果跟 redux 这种样板代码很多的框架组合, 如果 redux 可以再封装一层通用层, 甚至可以直接解放大部分的 redux 的样板代码。

最后

这个小的 lib 还有很多不足, 后期会继续跟进优化