I just try to understand what is happening - why my async method is waiting for another async method only if response is decostructed?

So I have some example code:

Dummy promise

const psedoRequest = () => {
  return new Promise(resolve => setTimeout(resolve, 2000, "resolved"));
}

Dummy method which is calling promise

const methodRequest = async() => {
  let response = "";
  let error = "";

  try {
    response = await psedoRequest();
  } catch (e) {
    error = e;
  }

  return { response, error };
}

Actual methods

const invalidMainMethod = async() => {

  const results = await methodRequest().response;
  console.log('Invalid', results)
  // the same would be with:
  // const response = await methodRequest().response; 
  // console.log('Invalid', response );
}

const validMainMethod = async() => {
  let results = ""

  const { response } = await methodRequest();
  results = response;
  console.log('Valid', results);
}

Console log returns:

Invalid undefined
Valid resolved

Why deconstructing actually works in that case - so it's waiting for response, while accesing directly .response is not? I thought that deconstructing is some syntactic sugar.

CodePudding user response：

const results = await methodRequest().response;

Property accessing has higher precedence than await so this:

1. Calls methodRequest
2. Gets a promise object
3. Reads response (which is undefined) from the promise
4. awaits undefined (which isn't a promise so has no significant effect)
5. Assigns undefined to results

Later the promise resolves.

You could get the desired effect by using parentheses to override precedence:

const results = (await methodRequest()).response;

const { response } = await methodRequest();

await has higher precedence than = so it awaits the promise first then assigns and deconstruction is done as part of assignment.

CodePudding user response：

This is ambiguous (to humans) and doesn't mean what you think it means:

await methodRequest().response

Are you awaiting methodRequest()? Or are you awaiting the response property from what methodRequest() returns?

Be explicit:

const results = (await methodRequest()).response;

CodePudding user response：

I see David was faster, but since I have already written my response here it is anyways:

The simple difference here is the syntax:

const response = await methodRequest().response;

This snippet awaits methodRequest().response What you are expecting it to do is to await methodRequest() and then get the response.

const { response } = await methodRequest();

This awaits methodRequest() and then takes the response from it like this:

const response = (await methodRequest()).response