How to refactor this function with async/await?

Question

I'm quite new to async/await and would like to know, what is the best way to refactor the below code with async/await?

export const createUser = (values, history) => {
  return dispatch => {
    axios.post('/api/signup', values)
      .then(res => {
        console.log('result', res);
      }, rej => {
        console.log('rejection', rej);
      });
  }
}

When only one argument is provided to .then it is pretty straightforward to me, but what happens if you have two arguments like here instead?

Answer 1

Here's how to do it, using https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function as a reference:

 const f = (values, history) => {
    return async function createUser( dispatch ) {
        try {
           const res = await axios.post('/api/signup', values);
           console.log('result', res);
        } catch(e) {
           console.log('reject', e);
        }         
    };
 }

Answer 2

The two arguments to .then are just the success and error callbacks. You could also write this as .then(res => {}).catch(rej => {})

Essentially you can think of the result of await as a .then callback. Any time you're waiting for the result of a promise, whether or not you use it, use await. For any errors, use the usual try/catch.

return async () => {
  try {
    const res = await axios.post('/api/signup', values);
    console.log('result', res);
  }
  catch (rej) {
    console.log('rejection', rej);
  }
}

One thing to keep in mind is that async functions always return a Promise, so the calling code has to be written to account for that.

I wrote a blog post about async/await (disclaimer, yes I wrote this).1