Gain insights into JavaScript Promises to handle asynchronous events, chain multiple promises, utilize built-in methods, and master async functions with await expressions for efficient event handling.



js.tar.gz

JS promises

promises

Promises are used to deal with event handling and callbacks in asynchronous programming in JavaScript, such as clicks and key presses. Promises allow developers to specify a function to execute at some later point in response to certain events. Promises may also indicate whether a certain code succeeded or failed in performing its assigned job.

In this course, you will learn how to chain different promises, which makes the code easier to understand and debug. Next, you’ll learn built-in methods to monitor and respond to multiple promises executing in parallel. Then, you will cover async functions and await expressions that are often used with promises. Finally, you’ll learn how to track promises when they are rejected without a rejection handler.

Promises are important to understand and debug the code in asynchronous programming. The concepts of JS promises help developers working with Node.js and Deno for event handling and with asynchronous JavaScript APIs.

JavaScript Promises

# Creating unsettled promises
New promises are created using the `Promise` constructor. This constructor accepts a single argument: a function called the executor, which contains the code to initialize the promise. The executor is passed two functions, `resolve()` and `reject()`, as arguments. When the executor has successfully finished, we call the `resolve()` function  to signal that the promise is resolved, or we call the `reject()` function to indicate that the operation has failed.
Here’s an example using the old `XMLHttpRequest` browser API:

// Browser example

import XMLHttpRequest from 'xhr2';
function requestURL(url) {
    return new Promise((resolve, reject) => {

        const xhr = new XMLHttpRequest();

        // assign event handlers
        xhr.addEventListener("load", () => {
            resolve({
                status: xhr.status,
                text: xhr.responseText
            });
        });

        xhr.addEventListener("error", error => {
            reject(error);
        });

        // send the request
        xhr.open("get", url);
        xhr.send();
    });
}

const promise = requestURL("https://www.educative.io/udata/1kZPll2Qgkd/book.json");

// listen for both fulfillment and rejection
promise.then(response => {
    // fulfillment
    console.log(response.status);
    console.log(response.text);
}, reason => {
    // rejection
    console.error(reason.message);
});

import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

import HelloWorld from './app';

var TestResult = function() {
    this.succeeded = false;
    this.reason = "";
    this.input = "";
    this.expected_output = "";
    this.actual_output = "";
}

export const executeTests = function() {

  var results = [];

  result = new TestResult();
  result.input = 'HelloWorld Component';
  result.expected_output = "span containing text 'Hello World'"

  let wrapper = shallow(<HelloWorld />);

  // Call your Challenge function here.

  let type = wrapper.type();
  let testSuccessful = true;
  let failureReason;

  if (type !== 'span') {
    testSuccessful = false;
    failureReason = "You need to render exactly one span HTML element";
  } else if (wrapper.props().children != "Hello World") {
     testSuccessful = false;
     failureReason = "You have rendered wrong message in your span element";
  }

  result.actual_output = wrapper.html();

  if (testSuccessful) {
    result.succeeded = true;
    result.reason = "Succeeded"
  } else {
    result.succeeded = false;
    result.reason = failureReason;
  }

  results.push(result);

  return results;
}


React

Dart

GoJS React

Typescript React

Vue.js

In this example, we have the following:
* **Lines 4–25:** The `XMLHttpRequest` call is wrapped in a promise. 
  * **Lines 10–15:** The `load` event indicates when a request has completed successfully, and so the promise executor calls `resolve()` in the event handler. 
  * **Lines 17–19:** Similarly, the `error` event indicates when the request couldn’t be completed, and so `reject()` is called in that event handler. 

We can follow this same process (using `resolve()` and `reject()` in event handlers) for converting event-based functionality into promise-based functionality. One important aspect of executors is that they run immediately upon creation of the promise. In the previous example, the `xhr` object is created, event handlers assigned, and the call initiated before the promise is returned from `requestURL()`. When either `resolve()` or `reject()` is called inside the executor, the promise’s state and value are immediately set, but all promise handlers (being microtasks) will not execute until the current script job completes. For example, consider what happens if we call `resolve()` immediately inside an executor, as in this code:

Learn how unsettled promises are created and executor errors are caught.

Introduction

Basics of Promises

Chaining Promises

Working with Multiple Promises

Async Functions and Await Expressions

Tracking Down the Unhandled Rejections

Conclusion

Unsettled Promises

Creating unsettled promises