Callbacks, Promises and Async/Await

by Theara Yuom

Babel + JSX

// Native
/* function printString(string){
  setTimeout(
    () => {
      console.log(string)
    }, 
    Math.floor(Math.random() * 100) + 1
  )
}

function printAll(){
  printString("A")
  printString("B")
  printString("C")
  
  console.log('Done!')
}
printAll() */
 
 // Callback
/* function printString(string, callback){
  setTimeout(
    () => {
      console.log(string)
      callback('success')
    }, 
    Math.floor(Math.random() * 100) + 1
  )
}
function printAll(){
  printString("A", (result) => {
    console.log('A', result)

    printString("B", (resultB) => {
      console.log('B', resultB)

      printString("C", (resultC) => {
        console.log('C', resultC)
      })
    })
  })
  
  console.log('Done!')
}
printAll()
*/

// Promise
function printString(string){
  return new Promise((resolve, reject) => {
    setTimeout(
      () => {
       console.log(string)
       resolve(string)
      }, 
     Math.floor(Math.random() * 100) + 1
    )
  })
}

function printAll(){
  printString("A")
  .then(() => {
    return printString("B")
  })
  .then(() => {
    return printString("C")
  })
  console.log('Done!')
}

// printAll()

// Await
async function printAllAwait(){
  let a = await printString("A")
  let b = await printString("B")
  let c = await printString("C")
  console.log('Done!', a, b, c)
}
printAllAwait()