react自定义hooks-自动改变页面的title，Http请求hooks等..（持续更新）

自定义Hooks说明

1.react的自定义Hooks必须使用use开头。
2.需要使用index.js去装载。(如下图所示)，建立一个hooks目录，然后装载文件。

image.png

一.自动改变title的hooks

import { useLayoutEffect, useState } from 'react';

export default function useTitleHook(title) {
  const [state, setState] = useState()
  
  useLayoutEffect(()=>{
    document.title = title;
    setState(title);
  }, [title])

  return state;
}

这个hooks使用了useLayoutEffect这个hooks，他可以改变dom节点的元素

使用方式：

import { useTitleHook,useHttpHook } from '@/hooks' //引入自定义hooks
  const title = useTitleHook(state);//state参数传递字符串，写入title名称

二.HTTP请求的hooks

import { useState, useEffect } from 'react';
import { Toast } from 'antd-mobile';

export default function useHttpHook({
  url,
  method = 'post',
  headers,
  body = {},
  watch = []
}){
  const [result, setResult] = useState();
  const [loading, setLoading] = useState(true);

  async function Http(){
    setLoading(true);

    const defaultHeader = {
      'Content-type': 'application/json'
    };

    let params;
    if(method.toUpperCase() === 'GET'){
      params = undefined;
    }else {
      params = {
        headers: {
          ...defaultHeader,
          headers
        },
        method,
        body: JSON.stringify(body)
      }
    }

    return new Promise((resolve, reject)=>{
      fetch('/api' + url, params)
        .then(res => res.json())
        .then(res => {
          if(res.status === 200){
            resolve(res.data);
            setResult(res.data);
          }else {
            Toast.fail(res.errMsg);
            reject(res.errMsg);
          }
        })
        .catch(err => {
          Toast.fail(err);
          reject(err);
        })
        .finally(() => {
          setLoading(false);
        })
    });
  }

  useEffect(()=>{
    Http();
  }, watch);

  return [result, loading];
}

这个hooks集成了antd-mobile，主要做移动端的请求，res.errMsg，res.data，要根据项目中约定的数据格式进行改写，如果需要PC端的，同理，按需修改就行了。