JSFiddle - React, Tailwind, and code Playground

by Darren Jennings

HTML

<div id="app">
</div>

JavaScript

function append(res){
  const app = document.getElementById('app');
  const div = document.createElement('div');
  app.appendChild(div)
  div.innerHTML = div.innerHTML += res
}

const a = () => new Promise(function (resolve, reject) {
	append("inside of a")
  setTimeout(() => {
  	resolve("a")
	}, 3000)
})

const b = () => new Promise(function (resolve, reject) {
	append("inside of b")
  setTimeout(() => {
  	resolve("b")
	}, 1000)
})

function doSomethingGood() {
  a().then(res1 => {
    append(res1)
    b().then(res2 => {
      append(res2)
    })
  })
}

function doSomethingBad() {
  const res =	a().then(res1 => {
    append("darren")
    append(res1)
    return "darren"
  }).then(res2 => {
  	append(res2)
    return "darren2"
  })
  
  res.then(res1 => {
		append("You would expect to see darren2 but instead got:" + res1)
		b().then(res2 => {
    	append(res2)
    })
  })
}

doSomethingBad()