Async / await

es7-ES8

(2016-2017)

LEANDRO NUNES

SENIOR software ENGINEER @

TWITTER | GITHUB | hackerrank @LNFNUNES

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

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

HTTPS://CANIUSE.COM/#FEAT=ASYNC-FUNCTIONS

http://kangax.github.io/compat-table/es2016plus/#test-async_functions​

NodeJS 7.6+

obrigado!

TWITTER | GITHUB @LNFNUNES