How do I wrap methods in react components

Question

I have a lot of functions looking like this

  doSomething = async (...) => {
    try {
      this.setState({loading: true});

      ...
      var result = await Backend.post(...);
      ...

      this.setState({loading: false});
    } catch(err) {
      this.setState({error: err});
    }
  }

Basically I have 2 variables loading & error that I have to manage for a lot of functions and the code is basically the same for all of them. Since there are no decorators in javascript and I do not wish to install any experimental lib for that how could I wrap this function to remove the duplicated setStates from above ?

Answer 1

Here is my current way, I pass the function as parameter.

We have many API, fetch data form backend, we have to handle error and do something with data.

Only data of service are different, the handling error is the same.

private processServiceResponse(resp: any, doSthWithData: (data: any) => void) {
    let { errors } = resp;
    if (this.hasError(errors)) {
      this.handleServiceErr(errors);
      return;
    }
    let data = resp;
    if (resp && resp.data) {
      data = resp.data;
    }
    doSthWithData(data);
  }

And here is how i pass function as parameter.

let rest1 = service1.getData();
processServiceResponse(rest1,(data)=>{
//only need to focus with processing data.
})

PS: It's typescript coding.