资源与异步 #

import { createResource } from 'solid-js';

function UserProfile({ userId }) {
  const [user] = createResource(userId, fetchUser);

  return (
    <Show when={user()} fallback={<p>Loading...</p>}>
      {(data) => <h1>{data().name}</h1>}
    </Show>
  );
}

async function fetchUsers() {
  const response = await fetch('/api/users');
  return response.json();
}

function UserList() {
  const [users] = createResource(fetchUsers);

  return (
    <Show when={!users.loading} fallback={<p>Loading...</p>}>
      <ul>
        <For each={users()}>
          {(user) => <li>{user.name}</li>}
        </For>
      </ul>
    </Show>
  );
}

function UserProfile() {
  const [userId, setUserId] = createSignal(1);

  const [user] = createResource(userId, async (id) => {
    const response = await fetch(`/api/users/${id}`);
    return response.json();
  });

  return (
    <div>
      <button onClick={() => setUserId(prev => prev + 1)}>
        Next User
      </button>
      <Show when={user()} fallback={<p>Loading...</p>}>
        {(data) => <h1>{data().name}</h1>}
      </Show>
    </div>
  );
}

import { Suspense } from 'solid-js';

function App() {
  return (
    <Suspense fallback={<p>Loading...</p>}>
      <UserProfile />
    </Suspense>
  );
}

function DataFetcher() {
  const [data] = createResource(fetchData);

  return (
    <Switch>
      <Match when={data.error}>
        <div class="error">
          <p>Failed to load data</p>
          <button onClick={data.refetch}>Retry</button>
        </div>
      </Match>
      <Match when={data.loading}>
        <p>Loading...</p>
      </Match>
      <Match when={data()}>
        {(d) => <DataDisplay data={d()} />}
      </Match>
    </Switch>
  );
}

import { ErrorBoundary } from 'solid-js';

function App() {
  return (
    <ErrorBoundary fallback={(err) => (
      <div>
        <h2>Something went wrong</h2>
        <p>{err.message}</p>
      </div>
    )}>
      <DataComponent />
    </ErrorBoundary>
  );
}

function OptimisticUpdate() {
  const [todos, { mutate, refetch }] = createResource(fetchTodos);

  const addTodo = async (text) => {
    mutate(prev => [...prev, { id: Date.now(), text }]);
    await fetch('/api/todos', { method: 'POST', body: JSON.stringify({ text }) });
    refetch();
  };

  return (
    <div>
      <button onClick={() => addTodo('New task')}>Add</button>
      <For each={todos()}>{(todo) => <li>{todo.text}</li>}</For>
    </div>
  );
}

function RefreshableData() {
  const [data, { refetch }] = createResource(fetchData);

  return (
    <div>
      <button onClick={() => refetch()}>Refresh</button>
      <Show when={data()}>
        {(d) => <pre>{JSON.stringify(d(), null, 2)}</pre>}
      </Show>
    </div>
  );
}