Gabriele Ferro Home

Promises, XMLHttpRequest, fetch and async/await

Today is dedicated entirely to JavaScript, in particular the completion of the course offered by Codecademy.

This is the third review of JavaScript that I do with an e-learning platform: I started with OpenClassRooms, then I switched to freeCodeCamp and now I finished the Codecademy course.

Day 73: 1 November 2020

**Today’s Progress:**

JAVASCRIPT PROMISES

Review & Cheatsheet

Awesome job! Promises are a difficult concept even for experienced developers, so pat yourself on the back. You’ve learned a ton about asynchronous JavaScript and promises. Let’s review:

  • Promises are JavaScript objects that represent the eventual result of an asynchronous operation.
  • Promises can be in one of three states: pending, resolved, or rejected.
  • A promise is settled if it is either resolved or rejected.
  • We construct a promise by using the new keyword and passing an executor function to the Promise constructor method.
  • setTimeout() is a Node function which delays the execution of a callback function using the event-loop.
  • We use .then() with a success handler callback containing the logic for what should happen if a promise resolves.
  • We use .catch() with a failure handler callback containing the logic for what should happen if a promise rejects.
  • Promise composition enables us to write complex, asynchronous code that’s still readable. We do this by chaining multiple .then()‘s and .catch()‘s.
  • To use promise composition correctly, we have to remember to return promises constructed within a .then().
  • We should chain multiple promises rather than nesting them.
  • To take advantage of concurrency, we can use Promise.all().

ASYNC/AWAIT

Review & Cheatsheet

Awesome work getting the hang of the async...await syntax! Let’s review what you’ve learned:

  • async...await is syntactic sugar built on native JavaScript promises and generators.
  • We declare an async function with the keyword async.
  • Inside an async function we use the await operator to pause execution of our function until an asynchronous action completes and the awaited promise is no longer pending .
  • await returns the resolved value of the awaited promise.
  • We can write multiple await statements to produce code that reads like synchronous code.
  • We use try...catch statements within our async functions for error handling.
  • We should still take advantage of concurrency by writing async functions that allow asynchronous actions to happen in concurrently whenever possible.

REQUESTS I

Review & Cheatsheet

You’ve done an amazing job navigating through making XHR GET and POST requests! Take some time to review the core concepts before moving on to the next lesson.

  1. JavaScript is the language of the web because of its asynchronous capabilities. AJAX, which stands for Asynchronous JavaScript and XML, is a set of tools that are used together to take advantage of JavaScript’s asynchronous capabilities.
  2. There are many HTTP request methods, two of which are GET and POST.
  3. GET requests only request information from other sources.
  4. POST methods can introduce new information to other sources in addition to requesting it.
  5. GET requests can be written using an XMLHttpRequest object and vanilla JavaScript.
  6. POST requests can also be written using an XMLHttpRequest object and vanilla JavaScript.
  7. Writing GET and POST requests with XHR objects and vanilla JavaScript requires constructing the XHR object using new, setting the responseType, creating a function that will handle the response object, and opening and sending the request.
  8. To add a query string to a URL endpoint you can use ? and include a parameter.
  9. To provide additional parameters, use & and then include a key-value pair, joined by =.
  10. Determining how to correctly write the requests and how to properly implement them requires carefully reading the documentation of the API with which you’re working.
XMLHttpRequest GET/POST boilerplate

REQUESTS II

Review

Let’s recap on the concepts covered in the previous exercises:

  1. GET and POST requests can be created a variety of ways.
  2. Use AJAX to asynchronously request data from APIs. fetch() and async/await are new functionalities developed in ES6 (promises) and ES8 respectively.
  3. Promises are a new type of JavaScript object that represent data that will eventually be returned from a request.
  4. fetch() is a web API that can be used to create requests. fetch() will return promises.
  5. We can chain .then() methods to handle promises returned by fetch().
  6. The .json() method converts a returned promise to a JSON object.
  7. async is a keyword that is used to create functions that will return promises.
  8. await is a keyword that is used to tell a program to continue moving through the message queue while a promise resolves.
  9. await can only be used within functions declared with async.
fetch GET/POST boilerplate
async/await GET/POST boilerplate

**Thoughts:**

A sense of satisfaction and completeness pervades me.

P.S. If you follow me and you are wondering about the outcome of my presentation of the fifth OpenClassRooms project…

Congratulation screen!

**Link to tweet:**

[twitter-follow screen_name='20Gabriele20']

February 2024
MTWTFSS
 1234
567891011
12131415161718
19202122232425
26272829 

Archives

Gabriele Ferro Home
Copyright © Ferro Gabriele. All rights reserved.