Welcome folks today in this tutorial we will be looking at react.js suspense data fetching from api complete example for beginners. All the source code of the application is given below. A step by step youtube video is also shown below.
Get Started
In order to get started we first of all need to create app.js file inside react application
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
import React, { Suspense } from "react"; import { createResource } from "./PersonApi"; import { Person } from "./Person"; import { Num } from "./Num"; const resource = createResource(); function App() { return ( <div className="App"> <Suspense fallback={<h1>loading num...</h1>}> <Num resource={resource} /> </Suspense> <Suspense fallback={<h1>loading person...</h1>}> <Person resource={resource} /> </Suspense> </div> ); } export default App; |
PersonApi.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
const fetchPerson = () => { return fetch("https://randomuser.me/api") .then(x => x.json()) .then(x => x.results[0]); }; const wrapPromise = promise => { let status = "pending"; let result = ""; let suspender = promise.then( r => { status = "success"; result = r; }, e => { status = "error"; result = e; } ); return { read() { if (status === "pending") { throw suspender; } else if (status === "error") { throw result; } return result; } }; }; export const randomNumber = () => { return new Promise(res => setTimeout(() => res(Math.random()), 3000)); }; export const createResource = () => { return { person: wrapPromise(fetchPerson()), num: wrapPromise(randomNumber()) }; }; |
Person.js
|
1 2 3 4 5 6 7 |
import React from "react"; export const Person = ({ resource }) => { const person = resource.person.read(); return <div>{person.name.first}</div>; }; |
Num.js
|
1 2 3 4 5 6 |
import React from "react"; export const Num = ({ resource }) => { const n = resource.num.read(); return <div>your random number is: {n}</div>; }; |
