Skip to content

Latest commit

 

History

History
101 lines (69 loc) · 3.28 KB

module-6.1-asynchronous-patterns.md

File metadata and controls

101 lines (69 loc) · 3.28 KB
Raw

6.1. Asynchronous Patterns

Asynchronous programming is a fundamental part of modern JavaScript development, and it's essential for handling tasks that may take some time to complete, such as fetching data from an API or reading from a file. In this submodule, we'll explore various asynchronous patterns and how to work with them effectively.

Callback Patterns

Callback patterns are a traditional way to handle asynchronous operations in JavaScript. They involve passing a function (a callback) as an argument to another function that will execute the callback once the task is complete.

Example:

function fetchDataFromAPI(callback) {
  setTimeout(() => {
    const data = { message: "Data fetched successfully" };
    callback(data);
  }, 1000);
}

function processFetchedData(data) {
  console.log(data.message);
}

fetchDataFromAPI(processFetchedData);

In this example, fetchDataFromAPI simulates an asynchronous operation using setTimeout and invokes the processFetchedData callback once the data is available.

Promises and Async/Await

Promises and the async/await syntax are more recent additions to JavaScript that simplify working with asynchronous code, making it more readable and manageable.

Example:

function fetchDataFromAPI() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = { message: "Data fetched successfully" };
      resolve(data);
    }, 1000);
  });
}

async function fetchData() {
  try {
    const data = await fetchDataFromAPI();
    console.log(data.message);
  } catch (error) {
    console.error(error);
  }
}

fetchData();

In this example, fetchDataFromAPI returns a Promise, and the fetchData function uses async/await to handle the asynchronous operation more elegantly.

Event Emitters

Event emitters are a pattern used for asynchronous communication between components in a system. They allow you to subscribe to and emit custom events, enabling a decoupled and reactive architecture.

Example:

const EventEmitter = require('events');
const eventEmitter = new EventEmitter();

eventEmitter.on('userLoggedIn', (user) => {
  console.log(`User ${user} logged in`);
});

eventEmitter.emit('userLoggedIn', 'Alice');

In this example, the event emitter listens for the 'userLoggedIn' event and reacts when the event is emitted with the username.

Reactive Programming

Reactive programming is a more advanced asynchronous pattern that involves working with data streams and applying functional programming concepts.

Example:

import { fromEvent } from 'rxjs';

const button = document.querySelector('button');
const buttonClicks = fromEvent(button, 'click');

buttonClicks.subscribe(() => {
  console.log('Button clicked');
});

In this example, the RxJS library is used to create a data stream of button click events, and a subscription reacts to each click event.

Benefits

  • Understanding asynchronous patterns is crucial for efficient JavaScript development.
  • Promises, async/await, and reactive programming with libraries like RxJS improve code readability and maintainability.

Mastering these asynchronous patterns equips you with the skills to handle complex asynchronous tasks and build responsive and efficient web applications.