The uses of callback or async await

October 31, 2022

I am trying to understand the use of callback, promise, and async/await.

The code I pasted below is working fine but I am wondering if it is the best way to present the same meaning in using callbacks, given that callback style might lead to "callback hell", or should I train myself writing all codes using async/await?

// working code:
const loginCheck = (data, callback) => {
  let formData = new FormData();
  formData.append('method', "login");
  formData.append('mobile', data.mobile);
  formData.append('password', data.password);
  formData.append('region', memberRegion);

  axios.post(API_MIDDLEWARE, formData).then(function(response) {
    callback(response.data);
  }).catch(function(error) {
    console.log(error);
    callback(false);
  });
}

Am I correct to use it like this:

const loginCheck = async (data, callback) => {
  let formData = new FormData();
  formData.append('method', "login");
  formData.append('mobile', data.mobile);
  formData.append('password', data.password);
  formData.append('region', memberRegion);

  await axios.post(API_MIDDLEWARE, formData).then(function(response) {
    // callback(response.data);
  }).catch(function(error) {
    console.log(error);
    // callback(false);
  });
}

What and how is the best way in order to have the same meaning as the original code using a callback?

>Solution :

You can do something like this:

const loginCheck = async (data, callback) => {
  let formData = new FormData();
  formData.append('method', "login");
  formData.append('mobile', data.mobile);
  formData.append('password', data.password);
  formData.append('region', memberRegion);

  try {  // get to use try/catch if you want
    const response = await axios.post(API_MIDDLEWARE, formData);
    callback(response.data);
  } catch (error) {
    console.log(error);
    callback(false);
  }
}

Or:

const loginCheck = async (data) => {
  let formData = new FormData();
  formData.append('method', "login");
  formData.append('mobile', data.mobile);
  formData.append('password', data.password);
  formData.append('region', memberRegion);

  try {
    const response = await axios.post(API_MIDDLEWARE, formData);
    return response.data;  // return instead of callback
  } catch (error) {
    console.log(error);
    throw error;  // you can throw
  }
}

Then instead of loginCheck(data, (checked) => { /*use checked*/ }), you do const checked = await loginCheck(data).

Or you can write:

const loginCheck = (data) => {
  let formData = new FormData();
  formData.append('method', "login");
  formData.append('mobile', data.mobile);
  formData.append('password', data.password);
  formData.append('region', memberRegion);
  return axios.post(API_MIDDLEWARE, formData);
}

And use like try { const checked = await loginCheck(...); } catch (error) { ... }

Try experimenting with those.