JHipster - 函数完成后执行代码

Question

I am using JHipster with react front end and I am having a great problem with the following:

function confirmRent() {
    const { rentEntity } = props;
    const entity = {
      ...rentEntity,
      ...rentValues
    };
    props.createRent(entity);
    /* execute this after createRent has finished
    const rentScsV = (res.value.status >= 200 && res.value.status < 300);
    props.history.push({
      pathname: "/",
      state: { rentScs: rentScsV }
    });
    */
  }

with function createRent located in another file

export const createRent: ICrudPutAction<IRent> = entity => async dispatch => {
  const result = await dispatch({
    type: ACTION_TYPES.CREATE_RENT,
    payload: axios.post(apiUrl, cleanEntity(entity))
  });
  dispatch(getEntities());
  return result;
};

I want to execute the commented code after createRent is finished.

I have tried returning a Promise in createRent and adding .then() : I get a Property 'then' does not exist.

I have tried adding a callback: It does not get executed, because createRent does not have access to history.

I have tried adding await in confirmRent like this

async function confirmRent() {
...
await props.createRent(entity);
/* execute the rest */
}

I get a Unexpected 'await' of a non-Promise (non-"Thenable") value error.

From what I can see, I can not change createRent signature, because a lot of other functions in other modules depend from it. Does anyone have an idea on how to resolve this issue?

Thank you!

Answer 1

I don't know what JHipster is, but if I see correctly, createRent is not an asynchronous function itself, it just returns one that is, so the props.createRent(entity); call does actually get executed before the code that comes after it.

[If I wrote const add = x => y => x + y instead of const add = (x, y) => x + y , then I would have to call it as add(5)(3) instead of add(5, 3) .]

To actually utilize it, you would need to store the value it returns, on which you could use .then() , like for example:

const cr = props.createRent(entity);
cr(dispatch).then(res => {
  const rentScsV = (res.value.status >= 200 && res.value.status < 300);
  props.history.push({
    pathname: "/",
    state: { rentScs: rentScsV }
  });
)

or you can skip the intermediary variable and call the returned function immediately:

props.createRent(entity)(dispatch).then(res => {
  const rentScsV = (res.value.status >= 200 && res.value.status < 300);
  props.history.push({
    pathname: "/",
    state: { rentScs: rentScsV }
  });
)

Answer 2

@lsti115 last comment gave me an idea so I tried this

new Promise(resolve => {
  resolve(props.createRent(entity));
}).then(res => {
  const rentScsV = ((res as any).value.status >= 200 && (res as any).value.status < 300);
  props.history.push({
    pathname: "/",
    state: { rentScs: rentScsV }
  });
});

and it worked.

Is this considered bad coding in any way?

Also I had to cast res as any because the compiler gave me this error Property 'value' does not exist on type '{}' .