Promises

Brief introduction to Promises and ES6 syntax

Lili - @lilianakastilio

ES6 Syntax

Some commonly used ES6 features

ECMA SCRIPT = ES

ES6 is the 6th Edition language specification for JavaScript from June 2015, you can find more info here: 

www.ecma-international.org

Const & let

Back in ES5 we used to use var, now in ES6 we have let and const.

  • let - can be reassigned
  • const - will error if you try to reassign it

Tip: Always use const and only use let when you need to be able to re-assign.

Arrow FunctioNs

In ES5 creating a function looked like this:

=>

In ES6 creating a function now looks like this:

Comparison

String Literals

String literals allow us to embed variables or expressions into a string

FOR EACH LOOP

Looping through each item in the array

Map

Return a new array by calling a function on each item in the original array

Promises

Promise is an assurance that something will happen in the future.

In JavaScript promises are often used to make sure we can do some async action and then process the data/result.

ASYNC Tea

Start boiling the kettle
Kettle is boiling Grab sugar
Kettle is boiling Grab tea bag
Kettle is boiling Grab milk
Kettle is boiling Grab a mug
Kettle is boiling Put tea bag into the mug
Kettle is boiling
Kettle finished boiling  ​⇒ Pour hot water into mug
Add milk
Add sugar
Stir

Promises States

  1. Rejected - a value is not returned due to some error
  2. Resolved - a promise has returned its final value
  3. Pending - where a promise is waiting to be either resolved or rejected

New Promise

Promise.ALL()

fetch()

Try it yourself

https://codepen.io/lili2311/pen/NaMNaR (fork it and get started!)

bit.ly/promises-workshop

Promises (ES6 + Fetch) Workshop Slides

By Liliana Kastilio

Promises (ES6 + Fetch) Workshop Slides

Introduction to Promises, ES6 basics and fetch() to show an example of fetching JSON data and rendering it on page

  • 1,594