您可以使用资源或直接使用 fetch API。资源允许您在渲染组件之前获取数据。
使用资源
Solid 有一个专用的 API，用于获取和渲染远程数据，该数据是使用createResource:
https://www.solidjs.com/docs/latest/api#createresource https://www.solidjs.com/docs/latest/api#createresource
资源允许您管理查询参数并在正在进行的请求的不同阶段呈现不同的元素。
const [data, { mutate, refetch }] = createResource(getQuery, fetchData);
Here, getQuery是携带查询参数的信号。它是可选的，更新它会导致自动重新获取。
fetchData是以资源形式返回承诺的获取器函数。
data是一个具有附加属性的 getter 函数：
-
data()返回成功值。
-
data.states返回正在进行的承诺的状态。
-
data.error如果承诺被拒绝，则返回失败的原因。
我将保持简短以避免重复文档。
这是一个工作演示：https://playground.solidjs.com/anonymous/6b063de1-584c-4691-aa38-cf8791070962 https://playground.solidjs.com/anonymous/6b063de1-584c-4691-aa38-cf8791070962
import { render } from "solid-js/web";
import { createSignal, Switch, Match, createResource } from "solid-js";
const getUsers = () => new Promise(resolve => {
const users = [
'Vivian Li',
'Lina Delgado',
'Aimee Navarro',
'Enzo Larsen',
'Diana Doyle',
'Elspeth Meyers',
'Michael Roberson',
'Junior Sparks',
'Daniela Orozco',
'Esme Larson',
];
setTimeout(() => resolve(users), 1000);
});
function App() {
const [data] = createResource(getUsers);
return (
<div>
<Switch fallback={<div>Not Found</div>}>
<Match when={data.state === 'pending' || data.state === 'unresolved'}>
Loading...
</Match>
<Match when={data.state === 'ready'}>
{JSON.stringify(data())}
</Match>
<Match when={data.state === 'errored'}>
{JSON.stringify(data.error)}
</Match>
</Switch>
</div>
);
}
render(App, document.getElementById("app")!);
直接使用 fetch API
您可以使用fetchAPI 直接在您的组件中，但您必须自己管理状态，以反映正在进行的请求的状态。
为了使代码自给自足，我将使用承诺，但您可以使用fetch功能和代码的工作原理相同。
在这里你可以找到一个演示：https://playground.solidjs.com/anonymous/a0b41605-f490-4787-bba0-130312cc2ba9 https://playground.solidjs.com/anonymous/a0b41605-f490-4787-bba0-130312cc2ba9
import { render } from "solid-js/web";
import { createSignal, Switch, Match } from "solid-js";
const getUsers = () => Promise.resolve([
'Vivian Li',
'Lina Delgado',
'Aimee Navarro',
'Enzo Larsen',
'Diana Doyle',
'Elspeth Meyers',
'Michael Roberson',
'Junior Sparks',
'Daniela Orozco',
'Esme Larson',
]);
function App() {
interface State {
status: 'pending' | 'resolved' | 'rejected';
data?: any;
error?: any;
};
const [state, setState] = createSignal<State>({ status: 'pending' });
const handleClick = () => {
getUsers()
.then(data => setState({ status: 'resolved', data, error: undefined }))
.catch(error => setState({ status: 'rejected', error }));
}
return (
<div>
<div>
<button type="button" onClick={handleClick}>
Fetch Users
</button>
</div>
<Switch fallback={<div>Not Found</div>}>
<Match when={state().status === 'pending'}>
Loading...
</Match>
<Match when={state().status === 'resolved'}>
{JSON.stringify(state().data)}
</Match>
<Match when={state().status === 'rejected'}>
{JSON.stringify(state().error)}
</Match>
</Switch>
</div>
);
}
render(App, document.getElementById("app")!);
在演示中，数据是通过点击处理程序获取的，但您可以将获取逻辑移至组件主体中并自动执行获取。
function App() {
interface State { status: 'pending' | 'resolved' | 'rejected', data?: any, error?: any };
const [state, setState] = createSignal<State>({ status: 'pending' });
getUsers()
.then(data => setState({ status: 'resolved', data, error: undefined }))
.catch(error => setState({ status: 'rejected', error }));
return (
<div>
<div>
<button type="button">
Fetch Users
</button>
</div>
<Switch fallback={<div>Not Found</div>}>
<Match when={state().status === 'pending'}>
Loading...
</Match>
<Match when={state().status === 'resolved'}>
{JSON.stringify(state().data)}
</Match>
<Match when={state().status === 'rejected'}>
{JSON.stringify(state().error)}
</Match>
</Switch>
</div>
);
}
