Mastering Axios in React: API Requests, Authentication, and Advanced Techniques | React Tutorial

🚀 Dive deep into Axios in React! In this tutorial, we'll explore step-by-step how to make API requests using Axios. Learn the ins and outs of axios.get and axios.post, and discover the power of axios({method: 'get'}) and axios({method: 'post'}). Uncover the secrets of authenticating your GET requests with a practical example. Explore the world of Axios instances, defaults, and take control with interceptors for both request and response handling. Follow along with coding examples and level up your React skills with this comprehensive Axios guide! 🌐⚛️
Please find the pinned comment example for update and delete request handler
Join this channel to get access to perks:
/ @tamilskillhub

[@muthupandiyan4453]

Delete and edit video upload pannuga bro

[@tamilskillhub]

Please find the example for update and delete request handler
To Update the product we can use PUT OR PATCH
import { useState } from "react";
import axios from "axios";
export default function UpdateProduct() {
const [id, setId] = useState("");
const [name, setName] = useState("");
const deleteSpecificProduct = () => {
if (id && name) {
axios
.put(`dummyjson.com/products/${id}`, { title: name })
.then((res) => console.log(res.data))
.catch((err) => console.log(err));
}
};
return (
setId(e.target.value)}
/>
setName(e.target.value)}
/>
Update Product Name
);
}
To delete the product we can use DELETE
import { useState } from "react";
import axios from "axios";
export default function DeleteProduct() {
const [id, setId] = useState("");
const deleteSpecificProduct = () => {
if (id) {
axios
.delete(`dummyjson.com/products/${id}`)
.then((res) => console.log(res))
.catch((err) => console.log(err));
}
};
return (
setId(e.target.value)}
/>
Delete Product
);
}

[@vijayaselvamc]

Very useful🎉. Thanks

[@tamilskillhub]

Welcome 😊

[@Believer-yk7th]

Thanks 😊for this video

[@tamilskillhub]

Welcome 😊

[@vijay0333]

Thank you bro for your knowledge sharing

[@tamilskillhub]

Thank you

[@pubgillusiontown5959]

Thank
you

[@tamilskillhub]

You're welcome

[@tamilskillhub]

Please find the example for update and delete request handler
To Update the product we can use PUT OR PATCH
import { useState } from "react";
import axios from "axios";
export default function UpdateProduct() {
const [id, setId] = useState("");
const [name, setName] = useState("");
const deleteSpecificProduct = () => {
if (id && name) {
axios
.put(`dummyjson.com/products/${id}`, { title: name })
.then((res) => console.log(res.data))
.catch((err) => console.log(err));
}
};
return (

setId(e.target.value)}
/>
setName(e.target.value)}
/>
Update Product Name

);
}
To delete the product we can use DELETE
import { useState } from "react";
import axios from "axios";
export default function DeleteProduct() {
const [id, setId] = useState("");
const deleteSpecificProduct = () => {
if (id) {
axios
.delete(`dummyjson.com/products/${id}`)
.then((res) => console.log(res))
.catch((err) => console.log(err));
}
};
return (

setId(e.target.value)}
/>
Delete Product

);
}

[@eherman810]

hi bro thank u for making this video. normal la api use panna network tap la esay ya security key with api pathukalam but yapadi secure key and api yarum pakama secure ra api-ya use panurathu? .env file illama? request ta onclick-la api poratha change or restrict pana madiuma react la ? video panuka bro rompa help full-la erukum thank you.

[@tamilskillhub]

Stay tuned

[@mohammedmohsin7851]

409 error oda response eppadi access panrathu bro

[@tamilskillhub]

You have to use the catch block and get the error

[@ragucool9468]

React redux with JWT Authentication - Sign up, Login, Logout & Private Route(access and refresh token redux state management ).how to handle token or session(state management redex store) in enterprice level application ....thanks in advance bro ... eagarly waiting bro..create enterprice level small application ( like ecommerce with cover all topics bro)

[@tamilskillhub]

Stay tuned

[@ragucool9468]

@@tamilskillhub thanks ....eagarly waiting bro

[@entirefactory7137]

good idea bro