如何正确管理Promise？Solid.js异步API数据获取问题解决

问题描述 #

我有两个组件API.jsx和Consume.jsx，尝试在API类中封装后端查询函数，在消费组件中调用获取数据，但控制台输出BoundFunctionObject { … }。

原API.jsx代码 #

import { createSignal, onCleanup } from "solid-js";

class API {

  static backendURL = "...";

  fetchPersons() {
    const [persons, setPersons] = createSignal([]);

    async function getPersons() {
      try {
        const response = await fetch(`${API.backendURL}/api/persons/`);
        const data = await response.json();
        setPersons(data);
      } catch (error) {
        console.error("Error", error);
      }
    }

    getPersons();
    return persons;
  }
}
export default new API();

原Consume.tsx代码 #

import { createSignal } from 'solid-js';
import API from './API';

const Table = () => {
  const [persons, setPersons] = createSignal([]);
  const data = await fetchPersons();
  setPersons(data);
  console.log(persons());

  return <div></div>;
};

export default Table;

问题分析 #

1. API层逻辑错误：原fetchPersons返回的是Solid.js signal的getter函数（persons），而非异步请求返回的实际数据，这是控制台输出BoundFunctionObject的核心原因。
2. 消费组件语法错误：组件函数并非async函数，却在顶层直接使用await；同时错误调用了全局的fetchPersons，实际应该调用API.fetchPersons()。
3. 未利用Solid.js异步数据管理API：手动混用signal和异步请求，没有使用框架专门用于异步数据的createResource，导致数据更新逻辑混乱。

修正方案 #

重构API层（API.tsx） #

将API从类改为纯异步函数封装，剥离Solid.js响应式API，让API层只负责数据请求逻辑：

const backendURL: string = "...";
async function getPersons() {
  const response = await fetch(`${backendURL}/api/persons/`);
  // 新增响应状态校验，避免解析错误响应
  if (!response.ok) {
    throw new Error(`请求失败：${response.status}`);
  }
  const data = await response.json();
  return data;
}

const API = {
  getPersons,
};
export default API;

消费组件（Consume.tsx） #

使用Solid.js的createResource管理异步数据，它会自动处理加载状态、数据更新和错误捕获：

import { createResource } from 'solid-js';
import API from './API';

const Table = () => {
  const [data] = createResource(API.getPersons);
  
  return (
    <div>
      {data.loading && <div>加载中...</div>}
      {data.error && <div>加载失败：{data.error.message}</div>}
      {data() && (
        <table>
          {/* 此处添加数据渲染逻辑 */}
        </table>
      )}
    </div>
  );
};

export default Table;

补充说明 #

• createResource是Solid.js专为异步数据设计的API，相比手动维护signal+async函数，它能更好地整合响应式系统，自动处理依赖更新、重新请求等场景。
• 保持API层的纯粹性，不混入框架响应式API，能提升代码的复用性和可维护性。

内容的提问来源于stack exchange，提问作者problème0123