Mastering Axios in React: API Requests, Authentication, and Advanced Techniques | React Tutorial
HTML-код
- Опубликовано: 23 авг 2024
- 🚀 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
Delete and edit video upload pannuga bro
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
);
}
Very useful🎉. Thanks
Welcome 😊
Thanks 😊for this video
Welcome 😊
Thank you bro for your knowledge sharing
Thank you
Thank
you
You're welcome
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
);
}
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.
Stay tuned
409 error oda response eppadi access panrathu bro
You have to use the catch block and get the error
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)
Stay tuned
@@tamilskillhub thanks ....eagarly waiting bro
good idea bro