异步函数内部的回调异步函数!是正确的?

时间:2020-11-08 14:03:58

标签: javascript reactjs typescript axios react-hooks

我希望这个重用异步功能使用很多地方!

const requestGetData = (callback?: Function): void => {
      (async (): Promise<void> => {
        try {
          if (callback) {
            await callback();
          }
          const data = await getDataApi();
          setData(data);
        } catch (error) {
          console.log(error)
        }
      })();
  };

我有不同的异步功能:

  const requestUpdateData = async (): Promise<void> => {
      await postUpdate();
      setCountUpdate(count+1);
    };

我将使用:

...
const handleUpdate=()=>{
  requestGetData(requestUpdateData);
}

useEffect(()=>{
  requestGetData()
},[])

我自定义异步是正确的吗?有没有更好的办法 ?我想要重用功能requestGetData

2 个答案:

答案 0 :(得分:0)

考虑调用该函数时,请使用await进行调用,这意味着您始终希望回调函数是异步的。我建议将回调参数的类型声明更新为() => Promise<any>,但我不明白为什么这需要成为IIFE。否则,对我来说很好。

答案 1 :(得分:0)

无需将其包装在IIFE中,也无需注意TS可以自动推断的函数的类型。另外,最好使用更具体的类型,例如Function,而不是() => void

请考虑以下内容:

const requestGetData = async (callback?: () => void) => {
    try {
        if (callback) {
            await callback();
        }
        setData(await getDataApi());
    } catch (error) {
        console.log(error);
    }
};

另一种选择是完全删除回调,并将调用者链.then插入到requestUpdateData调用中:

const requestGetData = () => {
    return getDataApi().then(setData);
};
requestUpdateData()
    .then(requestGetData)
    .catch((error) => {
        console.log(error);
    });

上面,requestGetData返回其Promise链而不捕获它,但是如果您希望应用程序中的其他任何内容在遇到错误时都不需要特殊的逻辑,就可以捕获它。