Enhancing the output of a promise by including additional data

Question

Enhancing the output of a promise by including additional data

Currently, I am utilizing a node library that facilitates simple HTTP requests and returns promises. This method works well for me as it allows multiple requests to be made simultaneously, which I can then gather later using Promise.all(). However, the challenge lies in the fact that each HTTP request only returns a string, whereas I also require additional identifying information about each request.

To address this issue, my approach involves extending the request promise chain to include the necessary information. Below is an example of how I am adding one such request to the array of promises:

var promises = [];
promises.push(new Promise(function(resolve, reject){
    ReqPromise('http://some.domain.com/getresult.php')
    .then(function(reqResult) {
        resolve({
            source: 'identifier',
            value: reqResult
        });
    });
}));

When this particular promise resolves, this is the output:

{
    source: 'identifier'
    value: 1.2.3.4
}

Do you think this method of tagging a promise result is optimal or is there perhaps a misunderstanding on my part regarding promises that eliminates the need for creating an additional promise as demonstrated above? It is worth noting that ReqPromise is from an external library, making it challenging to modify its behavior to accept and return extra parameters.

javascript promise

Answer 1

Answer №1

Big thanks to @Bergi for sharing the helpful link. I've put together this code, which is much more organized and easier to follow. I had attempted something similar in the past, but it seems I made an error because it was giving back undefined to Promise.all(). However, now everything is running smoothly without any additional promises needed.

promises.push(ReqPromise('http://some.domain.com/getresult.php').then(function(reqResult) {
    return {
        source: 'identifier',
        value: reqResult
    };
}));

Answer 2

Big thanks to @Bergi for sharing the helpful link. I've put together this code, which is much more organized and easier to follow. I had attempted something similar in the past, but it seems I made an error because it was giving back undefined to Promise.all(). However, now everything is running smoothly without any additional promises needed.

promises.push(ReqPromise('http://some.domain.com/getresult.php').then(function(reqResult) {
    return {
        source: 'identifier',
        value: reqResult
    };
}));

Answer 3

Answer №2

Hello @dsl101, taking a step further from your answer, it can be quite beneficial to use the .map() method on an array of data in order to transform it into an array of promises. This way, you can easily link each item of data with its asynchronously-obtained result.

Let's consider a scenario where you have an array of URLs.

var data = ['http://path/0', 'http://path/1', 'http/path/2', ...];
var promises = data.map(function(url) {
    return ReqPromise(url).then(function(reqResult) {
        return {
            'source': url,
            'value': reqResult
        };
    });
});
Promise.all(promises).then(function(results) {
    // each result now contains a .value and corresponding .source (url) property
});

Answer 4

Hello @dsl101, taking a step further from your answer, it can be quite beneficial to use the .map() method on an array of data in order to transform it into an array of promises. This way, you can easily link each item of data with its asynchronously-obtained result.

Let's consider a scenario where you have an array of URLs.

var data = ['http://path/0', 'http://path/1', 'http/path/2', ...];
var promises = data.map(function(url) {
    return ReqPromise(url).then(function(reqResult) {
        return {
            'source': url,
            'value': reqResult
        };
    });
});
Promise.all(promises).then(function(results) {
    // each result now contains a .value and corresponding .source (url) property
});

Answer 5

Answer №3

Thanks to the async/await syntax that was introduced in ES8, it is now possible to await a promise directly within an object literal.

This answer has been revised by @dsl101 to incorporate the async/await feature:

promises.push((async function() {
    return {
        source: 'identifier',
        value: await ReqPromise('http://some.domain.com/getresult.php')
    };
})());

Here is another example provided by @Roamer-1888:

var data = ['http://path/0', 'http://path/1', 'http://path/2', ...];
var promises = data.map(async function(url) {
    return {
        'source': url,
        'value': await ReqPromise(url)
    };
});
var results = await Promise.all(promises)

^{It is worth mentioning that functions can also be replaced with arrow functions for brevity.}

Edit: Please note that when pushing promises into an array, the function must be called first to "transform" it into a promise. In the case of using .map, the function is automatically called so it is already a promise.

Answer 6

Thanks to the async/await syntax that was introduced in ES8, it is now possible to await a promise directly within an object literal.

This answer has been revised by @dsl101 to incorporate the async/await feature:

promises.push((async function() {
    return {
        source: 'identifier',
        value: await ReqPromise('http://some.domain.com/getresult.php')
    };
})());

Here is another example provided by @Roamer-1888:

var data = ['http://path/0', 'http://path/1', 'http://path/2', ...];
var promises = data.map(async function(url) {
    return {
        'source': url,
        'value': await ReqPromise(url)
    };
});
var results = await Promise.all(promises)

^{It is worth mentioning that functions can also be replaced with arrow functions for brevity.}

Edit: Please note that when pushing promises into an array, the function must be called first to "transform" it into a promise. In the case of using .map, the function is automatically called so it is already a promise.

Enhancing the output of a promise by including additional data

Answer №1

Answer №2

Answer №3

Similar questions

Is it possible to combine Ajax, JS, HTML, PHP, and MySQL in a single project?

Storing Firebase credentials securely in Vue.js applications after deployment with environment variables (env_var)

How to modify the content type in an Angular.js $http.delete request

Issue with Framer Motion Modal: Animation presence fails to function

The process of masking a video with alpha data from another video on canvas seems to be experiencing a

Suspend operation to delay for ajax call within a websocket

Acquiring a fresh scope in Angular via a different component

Implementing key strokes in an HTML input field within a geckoWebBrowser

Guide on utilizing AngularJS Filter service without HTML for Chrome extension development

Experiencing difficulties with updating populated inputs that are connected to fetched data as they are not reflecting changes when modified

Trying to call an applet method using JavaScript will not be successful

Having difficulty changing the value of a Select element in AngularJS

Expanding a JSON data structure into a list of items

Are the orders of events maintained when emitted using an event emitter?

Passport.js does not provide authentication for server-side asynchronous requests

Utilizing Next.js to dynamically update data within a div element upon

Error message: Component is unable to access the $store property because it is undefined

Tips for converting Numbers or JSON to strings while exporting data to an Excel spreadsheet in React

How to download an Excel file (xlsx) using AngularJS and WebApi

Ways to set a default image for an <img> tag