今天分享一個get API的自定義hook做法，這個hook可以依據不同需求去做調整，我只是提供了做法和概念，當然也可以整合不同的方法，但是要考慮每支api的資料回傳及帶入參數的作法，如果有高度相同的話就可以用此方法來整合，但如果差異性太大的話還是建議思考一下，是否用另外的custom hook來區分不同做法的模組，不然如果設計出來的hook仍然需要帶入過多的參數的話是否失去原本簡化的目的。

一般的作法：

// in function component before return
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  useEffect(() => {
    setLoading(true)
    axios.get(api_url)
    .then((res)=>{
      setData(res.data)
    })
    .catch(err => {
      setError(err);
    })
    .finally(() => {
      setLoading(false);
    })
  },[])

那我們來看看custom hook的作法，這次我會用axios的做法來處理http的request，如果習慣使用fetch的朋友也可以將該段落換成fetch的作法。

// custom hook
import { useEffect, useState } from "react"
import axios from "axios"

// 可以以此類推做出不同方法的拿取hooks
const useFetch = (url) => {
  const [data, setData] = useState(null);
  // 方便你切換loading的動畫圖示
  const [loading, setLoading] = useState(false);
  // 錯誤顯示
  const [error, setError] = useState(null);
  // 帶入url的參數進來，同理也可將其他參數透過此方法來整合
  useEffect(() => {
    setLoading(true);
    axios.get(url)
    .then(res => {
      setData(res.data);
    })
    .catch(err => {
      setError(err);
    })
    .finally(() => {
      setLoading(false);
    })
  }, [url])
  // 這裡重新拿取的部分就非必要性了，但也提供大家參考
  const refetch = () => {
    setLoading(true);
    axios.get(url)
    .then(res => {
      setData(res.data);
    })
    .catch(err => {
      setError(err);
    })
    .finally(() => {
      setLoading(false);
    })
  }
  // 回傳的部分就是將狀態、資料、錯誤和重新拿取的function打包成物件的形式。
  return { data, loading, error, refetch };
}

export default useFetch

再回到原本的component中修改並引入剛剛寫好的useFetch()

// in function component before return
  const { data, loading, error, refetch } = useFetch(api_url);

這樣的作法在引入多個不同的api的時候，保持了各自獨立又簡化了原本的code，當然也可以做成Post, put, delet的不同方法來擴充成不同的hook，就是看需求來做整合了。

那麼，今天的分享就到這邊，希望有幫助到大家。