Async, Await and Promise

Async, Await and Promise Notes

Advantage of Async over Promise

They are both JavaScript’s unique way to achieve asynchronous programming,

while async/await(ES7) is introduced later than Promise(ES6),

because Promise was intended to eliminate the callback hell from ajax,

(callback hell => a ajax output requires a ajax input and chained together)

// chained ajax, very hard to read
$.ajax1({
	success:$.ajax2({
		success: $.ajax4({})
	})
	failure:$.ajax3()
})

but promise also create a monster of its own chaining together a lots of “then()”, and is not clear on the error catching

// chained promise, each then(), or catch(), finally() returns a promise, but easier to read than chained ajax
myPromise
.then(()=>handleResolvedA())
.then(()=>handleResolvedB())
.then(()=>handleResolvedC())
.catch(err => { console.log("oops") });
// output
// Error: oops at myPromise.then.then.then.then.then (index.js:8:13)

So the Async/await decorators was introduced later to offer easier way to do the same thing

async function myPromise(){
	let result;
	try{
		result = await handleResolvedA()
	}
	catch(err){
		console.log("oops")
	}
}
// output
// Error: oops at myPromise

To Sum Up

Async syntactic sugar provide a nice, simplified alternate way to handle asynchronous request that is simpler to read and maintain, over using Promise.

Last but not least, you can even add async in front of class/object methods to make them return promises, and await promises inside them.

class Person {
  constructor(first, last, age, gender, interests) {
    this.name = {
      first,
      last
    };
    this.age = age;
    this.gender = gender;
    this.interests = interests;
  }

  async greeting() {
    return await Promise.resolve(`Hi! I'm ${this.name.first}`);
  };

  farewell() {
    console.log(`${this.name.first} has left the building. Bye for now!`);
  };
}

let han = new Person('Han', 'Solo', 25, 'male', ['Smuggling']);