Taro中useEffect里调用异步函数为啥不生效？

ლ美霞提问于 2026-03-16 12:05:18 阅读 63

框架

我在Taro的页面组件里用useEffect发起网络请求，但发现请求根本没发出去，控制台也没报错。是不是写法有问题？

我试过把async直接写在useEffect回调里，也试过封装成单独函数再调用，都不行。比如这样：

useEffect(async () => {
  const res = await Taro.request({ url: '/api/data' });
  setData(res.data);
}, []);

但官方文档好像又说useEffect不能直接用async……那到底该怎么写才对？

我来解答赞 6 收藏

反馈

1 条解答

程序猿婉琳 Lv1

你的问题在于 useEffect 的回调不能直接写成 async 函数。

官方文档里说得很清楚，useEffect 要么不返回值，要么返回一个清理函数。但 async 函数总是返回 Promise，这会导致 React/Taro 把这个 Promise 当成清理函数来处理，结果就是警告加功能异常。

正确的写法有几种：

第一种，内部定义 async 函数：

useEffect(() => {

  const fetchData = async () => {

    const res = await Taro.request({ url: '/api/data' });

    setData(res.data);

  };

  fetchData();

}, []);

第二种，IIFE 写法：

useEffect(() => {

  (async () => {

    const res = await Taro.request({ url: '/api/data' });

    setData(res.data);

  })();

}, []);

第三种，用 .then 链式调用：

useEffect(() => {

  Taro.request({ url: '/api/data' })

    .then(res => setData(res.data));

}, []);

第三种最简单，但第一种写法结构更清晰，后续加清理逻辑（比如取消请求）也方便，推荐用第一种。

2026-03-17 09:19