如何在SolidJS中实现AsyncHandle封装资源的错误与加载状态？

原代码的核心问题 #

1. 未区分资源加载中和加载完成无错误状态，导致加载阶段错误渲染子组件
2. fallback逻辑存在短路问题，无法正确切换加载/错误提示
3. 未利用SolidJS原生的ErrorBoundary和Suspense实现符合框架设计的异步状态处理

修复后的组件实现 #

import { Component, Suspense, ErrorBoundary, children, Resource } from "solid-js";
import Alert from "./Alert";

// 约束props类型，确保传入的data是SolidJS标准资源类型
type AsyncHandleProps<T> = {
  data: Resource<T>;
  children: () => JSX.Element;
};

const AsyncHandle = <T,>(props: AsyncHandleProps<T>) => {
  const c = children(() => props.children);

  return (
    // ErrorBoundary捕获资源加载或子组件内的所有错误
    <ErrorBoundary
      fallback={({ error }) => (
        <Alert severity="warning">{error?.message || "加载出错"}</Alert>
      )}
    >
      // Suspense专门处理资源加载中的等待状态
      <Suspense fallback="loading...">
        {/* 资源加载完成后自动渲染子组件 */}
        {c()}
      </Suspense>
    </ErrorBoundary>
  );
};

export default AsyncHandle;

关键优化点 #

• 类型约束：通过泛型定义props类型，避免传入非标准资源导致的逻辑错误
• 状态分离：用Suspense处理加载等待、ErrorBoundary处理错误，完全贴合SolidJS的异步处理范式
• 逻辑简化：移除冗余的Show组件，利用资源自动触发Suspense的特性，子组件内直接调用props.data()即可
• 错误覆盖：ErrorBoundary不仅捕获资源加载错误，还能处理子组件渲染过程中抛出的异常

使用示例 #

import { createResource } from "solid-js";
import AsyncHandle from "./AsyncHandle";

// 模拟异步请求函数
const fetchData = async () => {
  const res = await fetch("/api/data");
  if (!res.ok) throw new Error("请求失败");
  return res.json();
};

const App = () => {
  const [data] = createResource(fetchData);

  return (
    <AsyncHandle data={data}>
      <div>加载完成的数据：{JSON.stringify(data())}</div>
    </AsyncHandle>
  );
};

内容的提问来源于stack exchange，提问作者akerbeltz