useEffect(async () => {
   await getPoiInfo(); // 請求數(shù)據(jù)
}, []);

useEffect(() => {
    // Create an scoped async function in the hook
    // 注意如果函數(shù)沒有使用組件內(nèi)的任何值，可以把它提到組件外面去定義
    // 下面代碼可以提到外面，可以自由地在 effect 中使用，下面就不改啦
    async function asyncFunction() {
      await requestData();
      setData(data)
    }
    // Execute the created function directly
    anyNameFunction();
 }, []); // 這里設(shè)置成[]數(shù)組，因為我們只想在掛載的時候運行它一次

useEffect(() => {
  // Using an IIFE
  (async function anyNameFunction() {
    await requestData();
  })();
}, []);

// 自定義hook
function useAsyncEffect(effect: () => Promise<void | (() => void)>, dependencies?: any[]) {
  return useEffect(() => {
    const cleanupPromise = effect()
    return () => { cleanupPromise.then(cleanup => cleanup && cleanup()) }
  }, dependencies)
}
// 使用
useAsyncEffect(async () => {
    const count = await fetchData()
    setCount(count)
  }, [fetchData])

// 封裝
const requestData = useCallback(async () => {
  changeLoading(true);
  changeError(false);
  changeList([]);
  requestAPI.getFeature({ type }).then((data) => {
    if (data) {
      changeList(data);
    }
  }).catch((e) => {
    changeError(true);
  }).finally(() => {
    changeLoading(false);
  });
}, [type]); // type改變會重新生成函數(shù)
// 普通接口請求
useEffect(() => { 
  requestData();
}, [requestData]);
// 單獨處理外層刷新的接口請求
// refreshing是props傳遞的過來的，不應(yīng)該與state狀態(tài)改變混在一起，這也是hook的優(yōu)勢，將不相關(guān)的狀態(tài)邏輯拆分成更細(xì)粒度
useEffect(() => { 
  if (!refreshing) { 
    return;
  }
  requestData().then(() => {
    getRefreshStatus(false);
  });
}, [refreshing]);