Async / await

Async  function make it possible to

treat functions returning Promise objects

as if they were synchronous.

es7-ES8

(2016-2017)

LEANDRO NUNES

SENIOR software ENGINEER @

TWITTER | GITHUB | hackerrank @LNFNUNES

authenticate user using ajax

then show logged version of home page

cenario

cenario

function loginUser(objUser) {
  console.log('logging user...')
  //... some asynchronous code (i.e. ajax POST request)
  console.log('User is logged !')
};

function showPage() {
  //...
  console.log('DONE')
})

const objUser = {user: 'leandrof', password: '123456'}
loginUser(objUser)
showPage()

// logging user...
// DONE
// User is logged !

callbacks

callback

function loginUser(objUser, cbFunc) {
  console.log('logging user...')
  //... some asynchronous code (i.e. ajax POST request)
  console.log('User is logged !')
  cbFunc()
};

function showPage() {
  //...
  console.log('DONE')
})

const objUser = {user: 'leandrof', password: '123456'}
loginUser(objUser, showPage)

// logging user...
// User is logged !
// DONE

authenticate user using ajax

THEN get user info

Then get user permissions

THEN get USER courses

then show logged version of home page

real cenario

callback hell

loginUser(objUser, (err, response) => {
  if (err) { throw 'Some error' }

  getUserInfo(response, (err, response) => {
    if (err) { throw 'Some error' }

    getUserPermissions(response, (err, response) => {
      if (err) { throw 'Some error' }

      getUserCourses(response, (err, response) => {
        if (err) { throw 'Some error' }
    
        // DONE
        showPage(response)
      })
    })
  })
})

promises

promises

function myPromiseFunction() {
  return new Promise((resolve, reject) => {
    // Some asynchronous code...
    // resolve on success
    resolve(true)
    // OR reject on failure
    reject(false)
  });
}

myPromiseFunction()
  .then(console.log) // true
  .catch(console.error) // false

promises

function loginUser(objUser) => { //... }
function getUserInfo(objLoggedUser) => { //... }
function getUserPermissions(objLoggedUserInfo) => { //... }
function getUserCourses(objLoggedUserInfo) => { //... })
function showPage(objLoggedUserInfo) { //... })

loginUser(objUser)
  .then(getUserInfo)
  .then(getUserPermissions)
  .then(getUserCourses)
  .then(showPage); // DONE
  .catch(err => {
    throw 'Some error'
  });

async / await

Async  function make it possible to

treat functions returning Promise objects

as if they were synchronous.

async / await

async function myAsynchronousFunction() {
  return new Promise((resolve, reject) => {
    // ...
  });
}

await myPromiseFunction()

async / await

async function loginUser(objUser) => { //... }
function showPage() { //... })

const objUser = {user: 'leandrof', password: '123456'}
await loginUser(objUser)
showPage()

// SyntaxError: await is a reserved word

async / await

async function loginUser(objUser) => { //... }
function showPage() { //... })

(async () => {
  const objUser = {user: 'leandrof', password: '123456'}
  await loginUser(objUser)
  showPage()
})()

// logging user...
// User is logged !
// DONE

async / await

async function loginUser(objUser) => { //... }
async function showPage() { //... })

(async () => {
  const objUser = {user: 'leandrof', password: '123456'}
  try {
    await loginUser(objUser)
    showPage()
  } catch(err) {
    console.error(err)
  }
})()

async / await

async function loginUser(objUser) => { //... }
async function getUserInfo(objLoggedUser) => { //... }
async function getUserPermissions(objLoggedUserInfo) => { //... }
async function getUserCourses(objLoggedUserInfo) => { //... })
function showPage(objLoggedUserInfo) { //... })

(async () => {
  const objUser = {user: 'leandrof', password: '123456'}

  try {
    const objLoggedUser = await loginUser(objUser)
    const objUserInfo = await getUserInfo(objLoggedUser)
    const objUserPermissions = await getUserPermissions(objUserInfo)
    const objUserCourses = await getUserCourses(objUserInfo)
    showPage(objUserCourses)
  } catch(err) {
    console.error(err)
  }
})()

browsers support

NodeJS 7.6+

obrigado!

TWITTER | GITHUB @LNFNUNES

Async/Await (ES8)

By Leandro Nunes

Async/Await (ES8)

Asynchronous code using async/await (ES8)

  • 595