使用 Suspense 处理请求状态

程序员晚天2024-03-06 17:45

React Suspense 是 React 16.6 引入的一个特性，它允许组件在渲染之前"等待"某些条件满足，并且能够指定一个加载状态（如旋转的加载指示器），在这个条件满足之前展示给用户。这项特性最初设计用来处理组件的懒加载和代码分割，但随着 React 18 版本的发布，其用途被扩展到数据获取的场景。

Suspense 的作用：

代码分割: 允许组件的动态导入，实现代码分割，减少初始加载时间。
数据获取: 和新的 Concurrent 特性一起使用，Suspense 能够在数据获取时显示回退（fallback）内容，等数据加载完成后再渲染组件。
资源预加载: 可以配合 React.lazy 使用，提前加载组件资源。

使用示例

在React中创建一个自定义的接口请求方法，可以使用Suspense来处理数据加载的状态，你可以创建一个能够抛出promise并将数据缓存起来的函数。以下是一个简单的示例：

代码示例：

tsx 复制代码

import { Suspense } from "react";

const promise = new Promise<string>((resolve) => {
  setTimeout(() => {
    resolve("data");
  }, 2000);
});

const createResource = (promise: Promise<string>) => {
  let status = "loading";
  let data: string;

  const result = promise.then(
    (res) => {
      data = res;
      status = "success";
    },
    (err) => {
      console.error(err);
      status = "error";
    }
  );

  return {
    read: () => {
      if (status === "loading") {
        throw result;
      } else if (status === "error") {
        throw data;
      } else if (status === "success") {
        return data;
      }
    },
  };
};

const resource = createResource(promise);

const Welcome = () => {
  console.log("Welcome");

  const data = resource.read();

  console.log("data", data);

  return <div>welcome: {data}</div>;
};

const Page = () => {
  console.log("Page");

  return (
    <Suspense fallback={<div>loading...</div>}>
      <Welcome />
    </Suspense>
  );
};

export default Page;