React,Vue管理异步加载状态的小工具

load-state

github

平常项目中经常碰到需要有加载中状态的管理，比如表单提交，一般是这样写的

import React from "react";
import "antd/dist/antd.css";
import { Spin, Button } from "antd";

class Demo extends React.Component {
  state = { loading: false };

  submit = async data => {
    this.setState({ loading: true });
    try {
      let res = await fetch("xxx.com", data);
      this.setState({ loading: false });
      alert("成功了");
    } catch (e) {
      this.setState({ loading: false });
    }
  };

  render() {
    return (
      <Spin spinning={this.state.loading}>
        <Button onClick={this.submit}>提交</Button>
      </Spin>
    );
  }
}

这样写很多时候会感觉比较繁琐，而且很多人大多数都不写异常处理，可能出现异常的时候加载中效果无法消除，导致用户无法操作，也很容易忘记再某些情况分支下关闭加载中效果

使用load-state这个小东西就可以这样写啦

import React from "react";
import "antd/dist/antd.css";
import { Spin, Button } from "antd";
import loadState from "load-state";

class Demo extends React.Component {
  state = { loading: false };

  loading = loadState.createRFn("loading");

  submit = async data => {
    let res = await this.loading(fetch("xxx.com", data));
    alert("成功了");
  };

  render() {
    return (
      <Spin spinning={!!this.state.loading}>
        <Button onClick={this.submit}>提交</Button>
      </Spin>
    );
  }
}

是不是清爽很多，不用自己去管理loading状态，不会忘记去关闭loading状态，如果有需要异常处理和平常一样的操作，不影响

还有一个问题就是有时候一个loading状态，多个地方同时使用（改变值），很容易出现混乱，load-state是使用一个数字来管理加载状态的，
多个地方同时使用一个状态也不会有问题，
注意看这里<Spin spinning={!!this.state.loading}> 使用了 !! 来转换类型

当然想更优雅的使用可以参考下方React Hook的实现，使用可以不转换类型

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中的状态名称

返回值

返回一个加载方法

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import { Spin, Alert, Button } from "antd";
import loadState from "load-state";

class Card extends React.Component {
  state = { data: { loading: false } };

  loading = loadState.createRFn("data.loading");

  showSetTimeout = async ms => {
    const pm = new Promise((resolve, reject) => {
      setTimeout(() => resolve(123), ms);
    });
    // 可以接受到异步返回值
    const result = await this.loading(pm);
    console.log(result);

    // 和上面代码一样 用await舒服很多
    // this.loading(pm).then(res => {
    //   console.log(res); // 123
    // });

    // 参数也可以是一个返回promise的方法
    // const result = this.loading(async () => {
    //   return await fetch("/aa/bb");
    // });
  };

  render() {
    return (
      <div>
        <Spin spinning={!!this.state.data.loading}>
          <Alert
            message="点击按钮进入loading状态"
            description="可多次点击."
            type="info"
          />
        </Spin>
        <div style={{ marginTop: 16 }}>
          Loading state: {this.state.data.loading} -{" "}
          {(!!this.state.data.loading).toString()}
          <Button
            style={{ margin: 16 }}
            type="primary"
            onClick={() => this.showSetTimeout(1000)}
          >
            1000ms
          </Button>
          <Button type="primary" onClick={() => this.showSetTimeout(2000)}>
            2000ms
          </Button>
        </div>
      </div>
    );
  }
}

演示地址：codesandbox

react hook封装示例

hook用起来更爽

import React, { useState } from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import { Spin, Alert, Button } from "antd";
import loadState from "load-state";

/**
 * react 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));
    })
  ];
}

function Demo() {
  // 获取loading 状态 和 loading状态管理方法
  const [loading, loadingFn] = useLoading(false, true);

  const showSetTimeout = async ms => {
    const pm = new Promise((resolve, reject) => {
      setTimeout(() => resolve(123), ms);
    });
    // 可以接受到异步返回值
    const result = await loadingFn(pm);
    console.log(result);
  };
  return (
    <div>
      <Spin spinning={!!loading}>
        <Alert
          message="点击按钮进入loading状态"
          description="可多次点击."
          type="info"
        />
      </Spin>
      <div style={{ marginTop: 16 }}>
        Loading state: {loading} - {(!!loading).toString()}
        <Button
          style={{ margin: 16 }}
          type="primary"
          onClick={() => showSetTimeout(1000)}
        >
          1000ms
        </Button>
        <Button type="primary" onClick={() => showSetTimeout(2000)}>
          2000ms
        </Button>
      </div>
    </div>
  );
}

演示地址：codesandbox

loadState.createVFn(field) Vue组件内使用封装

参数

field data中的状态名称

返回值

返回一个加载方法

<template>
  <div>
    <el-alert v-loading="!!data.loading" title="点击按钮进入loading状态" type="success" description="可多次点击"></el-alert>
    <p>{{data.loading}}-{{!!data.loading}}</p>
    <el-button type="primary" @click="showSetTimeout(1000)">1000ms</el-button>
    <el-button type="primary" @click="showSetTimeout(2000)">2000ms</el-button>
  </div>
</template>

<script>
import loadState from "load-state";
export default {
  data() {
    return {
      tableData: [],
      data: {
        loading: false
      }
    };
  },
  methods: {
    loadingFn: loadState.createVFn("data.loading"),
    showSetTimeout: async function(ms) {
      const pm = new Promise((resolve, reject) => {
        setTimeout(() => resolve(123), ms);
      });
      // 可以接受到异步返回值
      const result = await this.loadingFn(pm);
      console.log(result);

      // 和上面代码一样 用await舒服很多
      // this.loading(pm).then(res => {
      //   console.log(res); // 123
      // });

      // 参数也可以是一个返回promise的方法
      // const result = this.loading(async () => {
      //   return await fetch("/aa/bb");
      // });
    }
  }
};
</script>

演示地址：codesandbox