Scribd
Upload
52 views8 pages

Different Ways To Fetch Data in React

Fetch

Uploaded by

sergioj88
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
52 views8 pages

Different Ways To Fetch Data in React

Fetch

Uploaded by

sergioj88
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
You are on page 1/ 8
A © https://jsmastery.pro Different Ways to Fetch Data in React JS {35} JavaScript Mast jsmastery.pro 01 Fetch method The fetch() method in JS is used to request to the server and load the information in the webpages. The request can be of any APIs that return the data of the format JSON or XML. This method returns a promise. function App() { esd Om met fetch(' y neat SSUES. json()) .then(json = console. log(json)) Ee Dr return ( Dyes eu TaENERe OMe ice te) di } jsmastery.pro 02 Async- Await It is the preferred way of fetching the data from an API as it enables us to remove our .then() callbacks and return asynchronously resolved data. In the async block, we can use Await function to wait for the promise. function App() { useEffect(() > { (CO a Oem s ss avd const result = await axios.get('h Teale xi Reena) 3 catch (error) { console.error(error) E no 2) return
Different ways to fetch Data 5 jsmastery.pro 03 Axios library With Axios, we can easily send asynchronous HTTP requests to REST APIs & perform create, read, update and delete operations. Axios can be imported in plain JavaScript or with any library accordingly. function App() { useEffect(() axios.get(" renc@rencren) = console.log(response.data)); SP aoa @ Deeg alae kel ee /jsmastery.pro Custom Hook It is basically a React component whose name will start with “use” like useFetch. It can use one or more React hooks inside them. Cons rae et BCS Gee) Cae a ] = useStateCnult) Tea PS ‘] = useStateCnull) ieee ant eee Gaul p) nes een as cone Cours Pa criarest reser) Cours Parte te setApiData(data) setIsLoading(false) Pato @ at Eats ca sea bagel a) SCR te) ft Bi fetchData() ae cba) pati A q i 5 jsmastery.pro 05 Usage in the component Import the useFetch hook and pass the URL of the API endpoint from where you want to fetch data. Now just like any React hook we can directly use our custom hook to fetch the data. Teac te esa const App = () > { Clas CR RR eases EOL ee ee col rn Sate PeeCCEUr) EGE PER Crm Mesa isaac) Bessa ena ee PUES OS) Reset rea ere t rt Der jsmastery.pro 06 React Query library With this we can achieve a lot more than just fetching data. It provides support for caching and refetching, which impacts the overall user experience by preventing irregularities and ensuring our app feels faster. import axios from import { useQuery } from 'rea function App() £ const { isLoading, error, data useQuery On ares 1a console. log(data) Sucka ea Rea eae CN mel ee te 5 Link in Bio jsmastery.pro NM is eee he NET (q( == UY tela e-i4 e) fe (or) Build an Al Powered Movie Build an NFT Marketplace and Application and Master React Dive Into the World of Web 3.0 JSM Pro Masterclass Experience Become a Master Developer With the Project Experience to Prove It

You might also like