Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

355
Visualizações
Cómo puedo usar la promesa react-toastify mientras publico la fecha usando axios

// Quiere mostrar el control giratorio mientras publica y luego el mensaje de éxito/error usando react-toastify ¿Es posible?

 axios.post("/orders.json", order) .then((response) => { console.log(response.status); }) .catch((error) => { console.log(error); });
about 4 years ago · Juan Pablo Isaza
3 Respostas
Responde à pergunta

0

Sí, es posible. Puede tener un estado llamado isLoading y puede establecerlo en true cuando envía una solicitud de post y puede verificar isLoading antes de representar su componente como se muestra a continuación.

 if(isLoading) { return (<Spinner />) }

Y puede usar el brindis para mostrar el mensaje de success/error después de ejecutar el método de post . Como abajo

 toast.error('Sorry request failed')

o

 toast.success('Request successfull')

Pero antes de usar el brindis, envolvió el componente de la App en toast container como se muestra a continuación.

 import React from 'react'; import { ToastContainer, toast } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; function App(){ const notify = () => toast("Wow so easy!"); return ( <div> <button onClick={notify}>Notify!</button> <ToastContainer /> </div> ); }
about 4 years ago · Juan Pablo Isaza Relatório

0

Esto resolverá tu pregunta.

 import React, { useEffect, useState } from "react"; import axios from "axios"; import { toast } from "react-toastify"; import 'react-toastify/dist/ReactToastify.css'; toast.configure({ position: toast.POSITION.BOTTOM_RIGHT }); export default function App() { const [state, setState] = useState({ loading: true, dataArray: [] }); const myRequest = async () => { try { const request = await axios.get(`/generic_data/search_skills`); const { error, msg, data } = request.data; if (error) throw new Error(msg); setState({ ...state, loading: false, dataArray: data }); toast.success("All good, we have the data"); } catch (e) { toast.error("Upps, someting went wrong"); } }; useEffect(()=>{ myRequest() },[]) if (state.loading) { return "Loading data from server.. this will take long time..."; } return <div>The request has ended. We have the data</div>; }
about 4 years ago · Juan Pablo Isaza Relatório

0

import { toast } from "react-toastify"; const promise=axios.post("/orders.json", order) const res = await toast.promise(promise, { pending: "Posting", success: "Posted", error: "error message", });
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda