React 自定义 useLoading hooks

14 min read
import { useState } from "react";

export default function useLoading(initialState = true) {
  const [state, setState] = useState({ isLoading: initialState, isFailed: false, isSucceed: false });

  return {
    ...state,
    setLoading: () => {
      setState({
        ...state,
        isLoading: true,
        isFailed: false,
        isSucceed: false,
      });
    },
    setFinish: () => {
      setState({
        ...state,
        isLoading: false,
        isFailed: false,
        isSucceed: true,
      });
    },
    setError: () => {
      setState({
        ...state,
        isLoading: false,
        isFailed: true,
        isSucceed: false,
      });
    },
  };
}

hooks定义了接口返回的三种状态