How Can I Unnest Promises for Cleaner Asynchronous JavaScript Code?

Chaining Promises to Remove Nested Structures

When working with asynchronous operations, promises provide a convenient way to handle callbacks and maintain code readability. However, nested promises can quickly make code complex and difficult to follow. This article discusses how to remove nested promises and chain them for improved clarity.

Approach

To remove nested promises, we return a new promise from each then callback. This allows us to chain the promises one after the other, eliminating the need for nested structures. Here's a modified version of the provided code:

exports.viewFile = function(req, res) {
    var fileId = req.params.id;
    boxContentRequest('files/' + fileId + '/content', req.user.box.accessToken)
      .then(function(response) {
          return boxViewerRequest('documents', {url: response.request.href}, 'POST');
      })
      .then(function(response) {
          return boxViewerRequest('sessions', {document_id: response.body.id}, 'POST');
      })
      .then(function(response) {
          console.log(response);
      });
};

In this code, each then callback returns the promise for the subsequent request, ensuring that the execution continues sequentially.

General Pattern

The pattern for chaining promises is as follows:

somePromise.then(function(r1) {
    return nextPromise.then(function(r2) {
        return anyValue;
    });
}) // resolves with anyValue

     ||
    \||/
     \/

somePromise.then(function(r1) {
    return nextPromise;
}).then(function(r2) {
    return anyValue;
}) // resolves with anyValue as well

When returning a new promise, the resulting value from that promise is passed to the next handler in the chain. Alternatively, if the promise returned by the handler is the last one in the chain, the resolve value of that promise is passed to the consumer.

The above is the detailed content of How Can I Unnest Promises for Cleaner Asynchronous JavaScript Code?. For more information, please follow other related articles on the PHP Chinese website!