Asynchronous Tasks and Async/Await in App Development

TrashTalk- Lab By: Dr. Taha Havakhor Assistant Professor of MIS

Apps Screens 1. Welcome/landing 2. New account registration 3. Login 4. Registration/Login error screen 5. Profile Setup - What s your name? 6. Account Creation Success - Avatar review 7. Create/Join a chat room 8. Chat room

What we learn? Design of a real-time synchronous app Using native features of a phone: geolocation Asking for user permission Handling asynchronous requests More exposure to NoSQL databases Using external API s in React-Native environment Firing multiple AVD s to test real-time synchronous apps

Asynchronous tasks A combination of tasks wherein execution of one or more tasks should await completion of other(s) The async keyword: Put in front of a function declaration to turn it into an async function. An async function is a function that knows how to expect the possibility of the await keyword being used to invoke asynchronous code: async function hello() { return "Hello" }; hello(); let hello = async function() { return "Hello" }; hello(); let hello = async () => { return "Hello" }; Invoking the function now returns a promise. This is one of the traits of async functions their return values are guaranteed to be converted to promises.

Asynchronous tasks The await keyword: The advantage of an async function only becomes apparent when you combine it with the await keyword. await can be put in front of any async promise-based function to pause your code on that line until the promise fulfills, then return the resulting value. You can use await when calling any function that returns a Promise, including web API functions: async function hello() {return greeting = await Promise.resolve("Hello");};

Code without async/await (using promise/then) fetch('coffee.jpg') .then(response => { if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } else { return response.blob(); } }) .then(myBlob=> { let objectURL= URL.createObjectURL(myBlob); let image = document.createElement('img'); image.src= objectURL; document.body.appendChild(image); }) .catch(e => { console.log('There has been a problem with your fetch operation: ' + e.message); });

With async/await async function myFetch() { let response = await fetch('coffee.jpg'); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } else { let myBlob = await response.blob(); let objectURL = URL.createObjectURL(myBlob); let image = document.createElement('img'); image.src = objectURL; document.body.appendChild(image); } } myFetch() .catch(e => { console.log('There has been a problem with your fetch operation: ' + e.message); });

Additional resources https://developer.mozilla.org/en- US/docs/Learn/JavaScript/Asynchronous/Async_await