This content originally appeared on DEV Community and was authored by MOHSIN ALI SOOMRO
Promise
A promise is an object that may produce a single value some time in the future : either a resolved value, or a reason that it's not resolved (e.g., a network error occurred). A promise may be in one of 3 possible states: fulfilled, rejected, or pending
👉 A promise can states
✅ fulfilled - The action relating to the promise succeeded
❌ rejected - The action relating to the promise failed
⚪ pending - Hasn't fulfilled or rejected yet
Axios
Axios is a Javascript library used to make HTTP requests from node. js or XMLHttpRequests from the browser and it supports the Promise API that is native to JS ES6. It can be used intercept HTTP requests and responses and enables client-side protection against XSRF. It also has the ability to cancel requests
react-hot-toast
Smoking hot Notifications for React.
Lightweight, customizable and beautiful by default.
React Code
import axios, { AxiosResponse } from "axios";
import toast, { Toaster } from "react-hot-toast";
import { useEffect } from "react";
export default function App() {
const fetchData = async (): Promise<AxiosResponse> => {
const response = await axios.get(
"https://jsonplaceholder.typicode.com/users"
);
console.log({ response });
return response;
};
toast.promise(fetchData(), {
loading: "Process",
error: "error occurs in data",
success: "get data successfully...."
});
useEffect(() => {
fetchData();
}, []);
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<Toaster />
</div>
);
}
👏 Thanks for reading
This content originally appeared on DEV Community and was authored by MOHSIN ALI SOOMRO
MOHSIN ALI SOOMRO | Sciencx (2021-11-26T06:55:44+00:00) Use react-hot-toast with Promise & Axios. Retrieved from https://www.scien.cx/2021/11/26/use-react-hot-toast-with-promise-axios/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.