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

We want to use `Promise.all()` in any situation where we are waiting for multiple promises to fulfill and any one failure could cause the entire operation to fail. Here are some common use cases for `Promise.all()`.

# Processing multiple files together
When using a server-side JavaScript runtime, such as Node.js or Deno, we may need to read from multiple files to work with data contained inside. In this situation, it’s most efficient to read files in parallel and wait until they’ve all been read before proceeding to process the data we’ve retrieved. Here’s an example that works in Node.js:

{
    "fruit": "Pear",
    "size": "Medium",
    "color": "Green"
}

{
    "fruit": "Apple",
    "size": "Large",
    "color": "Red"
}

import { readFile } from "node:fs/promises";
function readFiles(filenames) {
    return Promise.all(
        filenames.map(filename => readFile(filename, "utf8"))
    );
}

readFiles([
    "file1.json",
    "file2.json"
]).then(fileContents => {

    // parse JSON data
    const data = fileContents.map(
        fileContent => JSON.parse(fileContent)
    );

    // process as necessary
    console.log(data);

}).catch(reason => {
    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

This example uses the Node.js promises-based file system API to read multiple files in parallel. The `readFiles()` function accepts an array of file names to read and then maps each file name to a promise created by the imported `readFile()` function. The file is read as text (as indicated by the `utf8` encoding passed as the second argument), and the results are available in the fulfillment handler as the `fileContents` array, which contains the text of each file name. From that point, the file contents are parsed as JSON into the data array and then passed to the `processData()` function. This is a common way to process data across multiple files because if any one file can't be read or parsed, then the operation can't be completed correctly and should be stopped.

# Calling multiple dependent web service APIs
Another common use case for `Promise.all()` is when calling multiple web service APIs. This is especially common with REST APIs, where each type of data associated with an entity may have its own endpoints. For example, consider an application where each user has both blog posts and albums, and we may need to gather all of that information on the user’s profile. The code might look like this:



Learn how Promise.all() processes multiple files, calls multiple APIs, and creates artificial delays.

Introduction

Basics of Promises

Chaining Promises

Working with Multiple Promises

Async Functions and Await Expressions

Tracking Down the Unhandled Rejections

Conclusion

When to Use the Promise.all() Method

Processing multiple files together