DEV Community


Posted on • Updated on

Use react-hot-toast with Promise & Axios


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 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


Smoking hot Notifications for React.
Lightweight, customizable and beautiful by default.

React Code

import toast, { Toaster } from "react-hot-toast";
import { useEffect } from "react";
import axios from 'axios'
export default function App() {
  const fetchData = async () => {
    const response = await axios.get(
    console.log({ response });
    return response;

  useEffect(() => {
   const callFunction= fetchData();
   toast.promise(callFunction, {
    loading: "Process",
    error: "error occurs in data",
    success: "get data successfully...."
  }, []);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Toaster />

Enter fullscreen mode Exit fullscreen mode

πŸ‘ Thanks for reading

Top comments (0)