JSFiddle - React, Tailwind, and code Playground

by acdcjunior

HTML

<h1>Open the console</h1>

JavaScript

function someFunctionWithCallback(argOne, argTwo, successCallback, errorCallback) {
  setTimeout(() => {
    if (argOne && argTwo) {
      successCallback(`Oh happy day! (${argOne}, ${argTwo})`);
    } else {
      errorCallback(`Saaad day... (${argOne}, ${argTwo})`);
    }
  }, 2000); // 2 seconds after
}


function someFunctionWithPromise(argOne, argTwo) {
  return new Promise((resolve, reject) => {
    someFunctionWithCallback(argOne, argTwo, resolve, reject);
  });
}

// SUCCESS EXAMPLES

someFunctionWithPromise(1, 2).then((successArgs) => {
  console.log("THEN/CATCH Success :) ", successArgs);
}).catch((errorArgs) => {
  console.log("THEN/CATCH Error :( ", errorArgs);
});

(async () => {

  try {
    let successArgs = await someFunctionWithPromise(1, 2);
    console.log("ASYNC/AWAIT Success :) ", successArgs);
  } catch (errorArgs) {
    console.log("ASYNC/AWAIT Error :( ", errorArgs);
  }

})();



// ERROR EXAMPLES

someFunctionWithPromise(1).then((successArgs) => {
  console.log("THEN/CATCH Success :) ", successArgs);
}).catch((errorArgs) => {
  console.log("THEN/CATCH Error :( ", errorArgs);
});

(async () => {

  try {
    let successArgs = await someFunctionWithPromise(1);
    console.log("ASYNC/AWAIT Success :) ", successArgs);
  } catch (errorArgs) {
    console.log("ASYNC/AWAIT Error :( ", errorArgs);
  }

})();