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

# Assigning handlers with `then()`
The `then()` method is present on all promises and takes two arguments. The first argument is a function to call when the promise is fulfilled, called the **fulfillment handler**. Any additional data related to the asynchronous operation is passed to this function. 

The second argument is a function to call when the promise is rejected, called the **rejection handler**. Similar to the fulfillment handler, the rejection handler is passed any additional data related to the rejection.

> **Note:** Any object that implements the `then()` method in this way is called a **thenable**. All promises are thenables, but not all thenables are promises. 


Let's understand this with the following illustration.

Both arguments to `then()` are optional, so we can listen for any combination of fulfillment and rejection. For example, consider this set of `then()` calls:

import fetch from "node-fetch";
const promise = fetch("https://www.educative.io/udata/1kZPll2Qgkd/book.json");

// add a fulfillment and rejection handler
promise.then(response => {
    // fulfillment
    console.log(response.status);
}, reason => {
    // rejection
    console.error(reason.message);
});

// add another fulfillment handler
promise.then(response => {
    // fulfillment
    console.log(response.statusText);
});

// add another rejection handler
promise.then(null, 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

All three `then()` calls operate on the same promise. 
- **Lines 5–11:** The first call assigns both a fulfillment and a rejection handler.
- **Lines 14–17:** The second only assigns a fulfillment handler; errors won’t be reported.
- **Lines 20–23:** The third just assigns a rejection handler and doesn’t report success.

One quirk of the `fetch()` function is that the returned promise is fulfilled whenever it receives an HTTP status, even 404 or 500. The promise is only rejected when the network request fails for some reason. If we want to ensure that the status is in the 200–299 range, we can check the `response.ok` property, as in this example:


Introduction

Basics of Promises

Chaining Promises

Working with Multiple Promises

Async Functions and Await Expressions

Tracking Down the Unhandled Rejections

Conclusion

Handlers

Assigning handlers with `then()`

Handlers

Assigning handlers with then()

Assigning handlers with `then()`