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.
Setting up Axios interceptors
From the course: Build Modern Web Apps with React, Hooks, State Management, and APIs Using Vite or Next.js
Setting up Axios interceptors
Welcome back. In the last video, we set up the exuse client, which was a generic client and underlying it was using exuse. We saw that using the create function, we can have the base URL property, the default headers, as well as some other properties like timeout. So this is where exuse is advanced from Fetch API. You can define a timeout of the request that if you didn't get a response for this number of milliseconds, then your request will automatically be timed out. Now we are going to see that along with every exeuse request, if we need to pass on any of the headers, so how can we do that in the client? So we don't have to do this in each of the API call. We can do something like exeos dot sorry the client dot interceptors dot request dot use. This is a middleware and a middleware is something that gets to catch the request or response before it actually gets processed. So before sending off this request, the client will be created and whatever headers we are going to write inside…
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)