Asynchronous JavaScript with promises

Introduction

Asynchronous programs play an important role in modern web development, allowing us to perform non-blocking operations such as retrieving data from the server, reading files, or running time-consuming tasks without freezing the user interface. JavaScript, with its event-driven nature, provides a powerful mechanism for managing asynchronous operations, one of which is Promises.

In this article, we will explore the promise of JavaScript, what it is, how it works, and some practical examples to demonstrate its use.

Understand the promise

A promise in JavaScript is an object that represents the completion or failure of an asynchronous operation and its result. Promises are a great way to organize and organize synchronous code in a more structured and readable way.

Creating a Promise

You can create a Promise using the Promise constructor, which implements a function called an executor. The execution function in turn takes two parameters: "resolve" and "reject". This is a function provided by JavaScript that allows you to execute or reject a promise.

Basic examples of making promises are:

const myPromise = new Promise (( resolve, reject ) => {
  // Simulate an asynchronous operation
  setTimeout (() => {
    const success = true;
    if (priority) {
      finish("The operation was successful!");
    } else {
      reject ( "Operation failed!" );
    }
  }, 2000); // resolve after 2 seconds
});

Consuming a Promise

If you have a promise, you can get the result using the method ".then ()" and ".catch ()". The ".then ()" method is used to handle success and the ".catch ()" method is used to handle errors.

myPromise
  .then ((result) => {
    console.log("Preferences:", result);
  })
  catch ((error) => {
    console.error("error:", error);
  });

Chaining Promises

Promises can be combined to perform asynchronous operations sequentially. Each ".then()" returns a new promise that allows you to maintain a clear and readable flow of asynchronous code.

fetchUserData() function
  return ( "https://api.example.com/user" )
    .then ((response) => {
      if (!response.no) {
        throw new Error("Network request failed");
      }
      return response.json();
    })
    .then ((userData) => {
      userData;
    })
    catch ((error) => {
      console.error("error:", error);
    });
}

Handling Multiple Promises Concurrently

Promises are good for performing multiple asynchronous operations at the same time using Promise.all() or Promise.race().

• "Promise.all ()": Resolves if all the promises in the array resolve successfully or is rejected if one of them fails.

const promise = [fetchData1(), fetchData2(), fetchData3()];

Promise.all (promise)
  .then ((result) => {
    console.log("All promises resolved:", result);
  })
  catch ((error) => {
    console.error("At least one promise was rejected:", error);
  });

• "Promise.race()": Resolves or rejects when one of the promises in the array resolves or rejects.

const promise = [fetchData1(), fetchData2(), fetchData3()];

Vada.race (promise)
  .then ((result) => {
    console.log("First promise to resolve:", result);
  })
  catch ((error) => {
    console.error("initial promise refused:", error);
  });

Conclusion

Promises are an important part of modern JavaScript, making it easy to manage asynchronous operations in a structured and efficient way. With a clear syntax and powerful methods, it simplifies the management of async code and helps developers avoid hell again. Whether you're working with network requests, file I/O, or other asynchronous work, mastering Promises is a key skill for JavaScript developers.