Load-state NPM

load-state

加载中状态管理. Loading state management. 使用数值类型来管理加载状态，每次调用加载方法状态+1，加载方法参数中的promise执行完成或异常后状态-1 当管理的状态值为0时为非加载状态，>0则为加载状态可以使用 !! 将其转为 boolean

loadState.createFn(changeLoadFn)

创建一个加载方法

参数

changeLoadFn function(change) 状态变更方法，change为1或-1, 可通过loadState.getNextState方法获取下一个状态值

返回值

返回一个加载方法function(promise),

promise可以是一个Promise对象或返回Promise对象的方法
0.1版本以上 promise可以是boolean值，true loading 计数+1 , false -1（这样使用需要自己管理好状态，不然可能会导致一些异常）
执行此方法，方法会将管理的状态值+1，promise对象成功或出现异常时会将状态值-1

loadState.getNextState(cur, change)

获取下一个状态值

参数

cur: 当前状态值
change: 修改值 1 或 -1 loadState.createFn 参数方法中接受到的参数

返回值

如果cur为boolean类型或为空则认为0，再继续加上change

loadState.createRFn(field) React组件内使用封装

参数

field state中的状态名称

返回值

返回一个加载方法

演示地址：

react hook封装示例

hook用起来更爽

/**
 * loading状态管理hook
 * @param initValue 可空， 初始值， 可以为boolean值或int
 * @param isNum 是否返回数字形式的加载状态， 默认为false, 返回boolean形式的状态
 * @return {[当前loading状态值, 状态管理方法]}
 */
function useLoading(initValue, isNum = false) {
  const [loading, setLoading] = useState(initValue);
  return [
    isNum ? loading : !!loading,
    loadState.createFn(change => {
      setLoading(prev => loadState.getNextState(prev, change));
    })
  ];
}

演示地址：