React Native / Javascript async await

Question

I would like to know why the code works like this:

async function Signin({ email, pass, confirmpass }) {
  const body = {
    'email': email,
    'pass': pass,
    'confirmpass': confirmpass,
  };
  const params = {
    endpoint: 'register_user',
    method: 'post',
    headers: null,
    body: body
  }
  const result = await api.connect(params);
  console.log(result);
}

but it doesn't work like this:

async function Signin({ email, pass, confirmpass }) {
  let result = await registerUser({ email, pass, confirmpass, });
  console.log(result);

  // TODO: api call 2
  // TODO: api call 3
  
}

async function registerUser({ email, pass, confirmpass }) {
  const body = {
    'email': email,
    'pass': pass,
    'confirmpass': confirmpass,
  };
  const params = {
    endpoint: 'register_user',
    method: 'post',
    headers: null,
    body: body
  }
  return api.connect(params);
}

It logs the following error: Possible Unhandled Promise Rejection

I have to make three calls to the api, so to make it more readable and easier to maintain I want to make the api calls in different functions.

I don't have much experience with JS Async/Await, I just started using it because I need to do something in React Native, I was from PHP before.

Update: I did like @safder said onj the comment and used try catch but now it doesn't wait the result

async function Signin({ email, pass, confirmpass }) {
  try {
    let result = await registerUser({ email, pass, confirmpass, });
    console.log(result);
  } catch {

  }

  // TODO: api call 2
  // TODO: api call 3

}

async function registerUser({ email, pass, confirmpass }) {
  let result = null;
  const body = {
    'email': email,
    'pass': pass,
    'confirmpass': confirmpass,
  };
  const params = {
    endpoint: 'register_user',
    method: 'post',
    headers: null,
    body: body
  }
  try {
   result = api.connect(params);
  } catch {

  }
  return result;
}

An unhandled promise rejection means you're calling an asynchronous function without wrapping it in a try ... catch block or using .catch() to catch any potential errors. — futur
– futur, Commented Jun 17, 2021 at 21:40
You have a redundant try/catch. You could just return api.connect(params) and keep the try/catch around the call site (let result = await registerUser) — jnpdx
– jnpdx, Commented Jun 17, 2021 at 22:27

user4406128 · Accepted Answer · 2021-06-17 22:38:53Z

1

Tank you @Safder, @ftrsk and @jnpdx

I need to use try catch on the first function and the second didn't need to be async.

async function Signin({ email, pass, confirmpass, }) {
  try {
    var result = await registerUser({ email, pass, confirmpass, });
    console.log(result);
  } catch {

  }
  
}

function registerUser({ email, pass, confirmpass, }) {
  const body = {
    'email': email,
    'pass': pass,
    'confirmpass': confirmpass,
  };
  const params = {
    endpoint: 'register_user',
    method: 'post',
    headers: null,
    body: body
  }

  return api.connect(params);
}

answered Jun 17, 2021 at 22:38

user4406128

Sign up to request clarification or add additional context in comments.

Comments

Kenton Blacutt · Accepted Answer · 2021-06-17 22:19:51Z

0

The problem is you're not waiting for api.connect(params) to execute. Always make sure to put await before an asynchronous function. You can fix the problem in the second code block by putting

const result = await api.connect(params)
return result

or even

return await api.connect(params)

answered Jun 17, 2021 at 22:19

Kenton Blacutt

2104 silver badges10 bronze badges

1 Comment

user4406128 Over a year ago

If I do that VS Code returns this message: Redundant use of await on a return value.sonarlint(javascript:S4326)

Collectives™ on Stack Overflow

React Native / Javascript async await

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related