From the course: Build Modern Web Apps with React, Hooks, State Management, and APIs Using Vite or Next.js
Unlock this course with a free trial
Join today to access over 25,200 courses taught by industry experts.
Deep understanding of fetch and Axios
From the course: Build Modern Web Apps with React, Hooks, State Management, and APIs Using Vite or Next.js
Deep understanding of fetch and Axios
Welcome back. In this video, we are going to discuss about the handling of loading and error states. In the real applications, we should always be showing loading states before our data arrives. It's very important for a good user experience to let the user know that something is loading behind the scenes and they should be patient. Also, we should always be showing the error messages in case something goes wrong. So eating up the error messages is a very bad practice and it's a very common contributor to bad designs. So your front-end application should always show loading states, it should always show the error in case of errors, as well as it should show properly aligned and fetched data when it was success from the API. As I said, this improves the user experience and it gives user an idea that what's happening behind the scenes. So they won't just sit back thinking that God knows what hope, God knows what's happening behind the scenes. It also prevents your app to breaking or…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
-
-
-
-
(Locked)
Overview and fetch API example8m
-
(Locked)
Axios installation and example6m 21s
-
(Locked)
Setting up Axios client8m 32s
-
(Locked)
Setting up Axios interceptors3m 37s
-
(Locked)
Comparison and summary3m
-
(Locked)
GET requests5m 1s
-
(Locked)
Deep understanding of fetch and Axios7m 13s
-
(Locked)
Loading and error UI patterns4m 16s
-
(Locked)
Enhancing the loading state with loader component3m 16s
-
(Locked)
Enhancing the error state with error component3m 35s
-
(Locked)
Skeleton loader6m 23s
-
(Locked)
Summary54s
-
(Locked)
Why useEffect matters: Overview2m 25s
-
(Locked)
Correct ways of dependency management5m 4s
-
(Locked)
Handling race conditions12m 36s
-
(Locked)
Mistakes to avoid: Summary2m 7s
-
(Locked)
CRUD operations: Introduction4m 45s
-
(Locked)
Project setup overview3m 19s
-
(Locked)
Fetching products: GET3m 14s
-
(Locked)
Adding a product: POST4m 26s
-
(Locked)
Updating a product: PUT5m 35s
-
(Locked)
Deleting a product: DELETE2m 8s
-
(Locked)
Combining everything as an SPA5m 55s
-
(Locked)
Common mistakes: Practices and summary4m 47s
-
(Locked)
Advanced API integration: RTK and TanStack recap3m 8s
-
(Locked)
Recap: UseQuery fetching data using TanStack Query3m 55s
-
(Locked)
Recap: Mutation and optimistic updates with TanStack Query2m 18s
-
(Locked)
Key benefits and summary2m 27s
-
(Locked)
Project overview and setup4m 57s
-
(Locked)
API client setup10m 8s
-
(Locked)
Fetching all posts7m 45s
-
(Locked)
Creating a new post6m 10s
-
(Locked)
Updating a post5m 30s
-
(Locked)
Deleting a post7m 43s
-
(Locked)