React Hook从0开始实现一个useInfo

缘起

页面的渲染离不开数据的请求，因为使用了React Hook，所以这块可以交给自定义的的Hook来处理

设计

请求接口，一般有这么几个参数，data loading hasError 等，这几个信息要透出给页面，开搞

import { useState, useEffect } from 'react';

export const request = <T>(url: string): Promise<T> => {
  return new Promise((resolve, reject) => {
    fetch(url)
      .then(
        (res) => {
          if (res.ok) {
            return res.json();
          }
          return reject(res.body);
        },
        (err) => reject(err)
      )
      .then((res: T) => resolve(res));
  });
};

export const useInfo = <T>(url: string) => {
  const [info, setInfo] = useState<T>();
  const [hasData, setHasData] = useState<boolean>(false);
  const [hasError, setHasError] = useState<boolean>(false);
  const [loading, setLoading] = useState<boolean>(false);
  useEffect(() => {
    const getData = async () => {
      setLoading(true);
      try {
        const res = await request<T>(url);
        setHasData(true);
        setInfo(res);
      } catch (err) {
        setHasError(true);
      } finally {
        setLoading(false);
      }
    };
    if (url) {
      getData();
    }
  }, [url]);
  return [info, loading, hasData, hasError] as const;
};

在组件中使用

import * as React from 'react';
import { useInfo } from '.';

interface DataInfo {
  count: number;
  data: string;
}
const Component = () => {
  const [info, loading, hasData, hasError] = useInfo<DataInfo>('请求的URL');
  return <div>你的组件</div>
}
export default Component

结尾

这里写的比较简单，错误处理什么都没做，不过大致思路就这样子。