Javascript async / await Frontend-IL

Javascript async / await Frontend-IL

• 1.
  Fulfill the promise Asyncawait with javascript Ran Wahle
• 2.
  What will wesee today?  Promise patterns (and standards)  Async / await
• 3.
  Promise creation demo
• 4.
  ES2015 promise  Onestandard (No more “Success”)  Native javascript implementation  Native support in new APIs
• 5.
  Using Fetch API
• 6.
  async await  Writingasynchronously with “synchronous” syntax  await keyword “turns” a promise to its resolved value
• 7.
  Async await vs.Promise const fetchPromise = fetch( '/allmessages') .then( (response) => { return response.json() .then(messages => { messages.forEach(message => { //present messages }); }, error => { console.error(error); }); try { const response = await fetch('/allmessages'); const messages = await response.json(); messages.forEach(message => { //present messages }); } catch (error) { console.error(error); }
• 8.
  Where is thecallback?  try { const response = await fetch('/allmessages'); const messages = await response.json(); messages.forEach(message => { //present messages }); } catch (error) { console.error(error); } Create promise Callback
• 9.
  Why marking withasync?  You’re not really synchronous when using await  Whenever there’s await keyword ,and after it, you are on the callback.  You should not assume that you are running synchronously
• 10.
  Async / Await
• 11.
  Platform support
• 12.
  Lets wrap  Asyncawait is for code simplification  No synchronous code exists below await  We should mark await-using function with async  Async marked function returns promise.
• 13.
  Thanks Ran Wahle http://blogs.microsoft.co.il/ranw Twitter: @ranwahle Ran.wahle@gmail.com Linkedin: https://il.linkedin.com/in/ranwahle