REACTJS : How to know if a method fails inside a Promise?

Question

I have an promise that is the Module object of a WASM in my component called like that

this.myPromise.then(async (module: any) => {
module.myMethod();
 ...other methods and logic
 }).catch(alert());

this myMethod is a simply cpp function. By commenting out this method I have simulated that this method isn´t reacheble and in the console I got the log from my cpp function .How can I catch this failing method event ? I want to display a loading bar while it loads and a failure message when it fails

NOTE: I tried using .catch() but with an alert inside because and error was not defined.

UPDATE: I am trying to use react tostify with a boolean flag but the tast.error is called after the state is changed not in the catch as soon as the error is thrown(note that my promise with the catch is inside the componentDidMount():

  componentDidMount() {
 this.myPromise.then(async (module: any) => {
module.myMethod();
 ...other methods and logic

 }).catch(alert()); .catch((err: any) => {
    console.log(err);
    this.fail= true;

    toast.error("Error occurred!", {
      position: "top-right",
      autoClose: 5000,
      hideProgressBar: false,
      closeOnClick: true,
      pauseOnHover: true,
      draggable: true,
      progress: undefined,
    });
  });
   }//end of componentDidMount


   ...

   return (
  <React.Fragment>
    {this.fail== true ? (
      <div>
        <ToastContainer />
      </div>
    ) : (
      <React.Fragment>
        other content to show
      </React.Fragment>
    )}
  </React.Fragment>
);
 }
  }

What is a failing method event? Are you saying somehow `module.myMethod();` isn't called? Or that `module.myMethod();` ***is*** called and it throws *some* error? Can you share how/where you used a `.catch` block/thenable? — Drew Reese, Jun 05 '21 at 05:19
You can pass resolve and reject callback functions like in this [docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise#chained_promises) — JeX, Jun 05 '21 at 05:20
@DrewReese yes the method is called but I want to simulate some connection problem. I was wondering if by failing this method being inside apromise all the promise will fail so I can use .catch() — spring00, Jun 05 '21 at 05:28
You need to either throw an error or actively `reject` a Promise. I'm not sure if this is what you are looking for, but you could also try making a timed Promise higher order function that auto rejects if a function doesn't resolve within a set timeout. — Drew Reese, Jun 05 '21 at 05:29
`this.fail= true;` will not cause a re-render in react, you need to use state for this. Also in your code snippet it's not quite clear what is part of `componentDidMount` and what is part of `render`. Better post a full `class` code that can be executed. — Bergi, Jun 06 '21 at 15:17
@Bergi I wrapped what is part of componentDidMount .The fact is that the states contatins some hardcoded data(that are dispayed if the promise is not resolved -> on the contrary thestate is manipulated by other logic) ,But having ,on purpose, made the promise failed this "logic" is not called so I am displaying the hardcoded data that if changed trigger the toast. — spring00, Jun 06 '21 at 16:43

score 2 · Answer 1 · answered Jun 05 '21 at 10:12

2

You can add a catch block to get errors thrown by the promise:

this.myPromise.then(async (module: any) => {
module.myMethod();
 // ...other methods and logic
 }).catch(error => {alert(error)});

answered Jun 05 '21 at 10:12

with the alert works but with the toastify not! please see my update – spring00 Jun 06 '21 at 10:18

score 0 · Answer 2 · answered Jun 06 '21 at 10:42

0

Try to use this syntax :

const myPromise = new Promise((resolve, reject) => {
  const test = true;
  test? 
       resolve(test):  //resolve it return the good value
       reject('Error'); //reject return the error
});

answered Jun 06 '21 at 10:42

Salah ED

535
7
17

[What is the explicit promise construction antipattern and how do I avoid it?](https://stackoverflow.com/questions/23803743/what-is-the-explicit-promise-construction-antipattern-and-how-do-i-avoid-it) – Thomas Jun 07 '21 at 05:21

score 0 · Accepted Answer · answered Jun 07 '21 at 05:14

0

I resolved by triggering it with a new setting of the state.

answered Jun 07 '21 at 05:14

spring00

177
1
4
13

REACTJS : How to know if a method fails inside a Promise?

3 Answers3