Halo! Bingung cari-cari tutorial atau cara mudah men-fetch api dengan solidjs?
Ini adalah contoh sederhana dengan menggunakan createResource() dan menampilkan datanya dengan <For>.
Yang pertama kali tentu mengimpor fungsi yang diperlukan.
import { createResource } from 'solid-js'
Nah, setelah diimpor kita fetch API untuk diambil datanya.
const App = () => {
const fetchUsers = async () => {
const response = await fetch('https://randomuser.me/api')
return response.json()
}
const [data] = createResource(fetchUsers)
}
Kemudian, kita tampilkan datanya dengan <For></For>,
{data() && (
<For each={data().results}>
{(user) => (
<p>Hai, {user.name.first}!</p>
)}
</For>
)}
Full Contoh Kode
import { createResource } from 'solid-js'
import { render } from 'solid-js/web'
const App = () => {
const fetchUsers = async () => {
const response = await fetch('https://randomuser.me/api')
return response.json()
}
const [data] = createResource(fetchUsers)
return (
<>
{data() && (
<For each={data().results}>
{(user) => (
<p>Hai, {user.name.first}!</p>
)}
</For>
)}
</>
)
}
render(App, document.getElementById("app"))
Kesimpulan
Itulah dia cara mudah fetch API pada Solidjs!
Silakan koreksi apabila ada kesalahan melalui kolom komentar.
Top comments (0)