axios 如何使用React.Suspense进行API调用？

ckocjqey 于 2022-11-05 发布在 iOS

关注(0)|答案(3)|浏览(239)

我读过关于React.Suspense的文档，它看起来很棒，但是我如何在执行api调用时使用它，例如使用axios？
更具体地说，为什么这段代码不起作用？

export default function Foo(){
const [state, setState] = useState()

useEffect(()=> {
    axios.get("url")
    .then(res=> setState(res.data))
    .catch(_=> setState(null)
}, [])

return (
    <Suspense fallback="loading data">
       <div>hello {state.name}</div>
    </Suspense>
)
}

谢谢你！

axios

来源：https://stackoverflow.com/questions/61733395/how-to-use-react-suspense-with-a-api-call

3条答案

按热度按时间

vojdkbi01#

根据React文档，您尝试实现的目标是可能的。有一个名为并发模式的实验性功能。您可以在React文档中找到实现详细信息。暂挂文档链接：https://reactjs.org/docs/concurrent-mode-suspense.html
但是有一个限制，你必须使用一个利用这个特性的npm包。中继是React团队建议的。
这是文档本身中提供的代码沙箱链接。
https://codesandbox.io/s/frosty-hermann-bztrp

赞(0）回复(0）举报 2022-11-05

cyvaqqii2#

请尝试以下操作：

// fetch data 
function fetchSomeData(baseCatUrl) {
  let status = "pending";
  let result;
  let suspender = axios(baseCatUrl).then((res) => {
    status = "success";
    result = res.data;
  }, (e) => {
    status = "error";
    result = e;
  });
  return {
    read() {
      if (status === "pending") {
        throw suspender;
      } else if (status === "error") {
        throw result;
      }
      else if (status === "success") {
        return result;
      }
    }
  }
}

// Component using data 
const resource = fetchSomeData(baseCatUrl);
const Component = () => {
  return (
    <Suspense fallback={<p>Loading...</p>}>
      <ChildComponent resource={resource} />
    </Suspense>
  )
};

赞(0）回复(0）举报 2022-11-05

aiqt4smr3#

Suspense用于异步加载Components，而不是API。它用于延迟加载使用React.lazy导入的组件。
即使你设法呈现了你的组件，它在你的情况下也不会有任何区别。

赞(0）回复(0）举报 2022-11-05