The console is displaying a promise that is pending, rather than the desired data

Question

The console is displaying a promise that is pending, rather than the desired data

Here is the content of my file:

 'use strict'
import * as moment from "moment";
import { Report} from "./Report";
import { Timeframe} from "./Timeframe";
import { ReportComparison } from "./ReportComparison";

function test(firstFrom: string, firstTo: string, secondFrom: string, secondTo: string) {


    var pastReport = new Report(new Timeframe(moment(firstFrom), moment(firstTo)));
    var laterReport = new Report(new Timeframe(moment(secondFrom), moment(secondTo)));

    var reportComparison

    function getData(pastReport: Report, laterReport: Report) {

        var later = function() {
            return new Promise((resolve, reject) => {
                laterReport.fetchData(data => resolve(data));
            });
        };

        var past = function() {
            return new Promise((resolve, reject) => {
                pastReport.fetchData(data => resolve(data));
            });
        };

        return Promise.all([later(), past()]).then(() => {
            laterReport.sort();
            reportComparison = new ReportComparison(pastReport, laterReport);

            return {
                pastReport: {
                    projects: reportComparison.pastReport.projects,
                    timeFrame: reportComparison.pastReport.timeframe,
                    totalAutomatedRuns: reportComparison.pastReport.totalAutomatedRuns,
                    totalManualRuns: reportComparison.pastReport.totalManualRuns

                },
                laterReport: {
                    projects: reportComparison.laterReport.projects,
                    timeFrame: reportComparison.laterReport.timeframe,
                    totalAutomatedRuns: reportComparison.laterReport.totalAutomatedRuns,
                    totalManualRuns: reportComparison.laterReport.totalManualRuns
                },
                trends: reportComparison.trends
            }

        });

    }

    return getData(pastReport, laterReport).then((res) => {
        return res;
    });

}



console.log(test("20170707", "20170707", "20170710", "20170710"))

In its current state, when I run console.log it displays Promise { <pending> } instead of the desired JSON object. I am wondering if my approach to dealing with asynchronous code is correct? Can anyone suggest a solution that would allow me to return the JSON object directly rather than a pending promise?

javascript json typescript asynchronous

Answer 1

Answer №1

The function test does in fact return a promise. To retrieve the data, use the .then() method.

test("20170707", "20170707", "20170710", "20170710")
    .then((response) => {
         console.log(response);
    });

Answer 2

The function test does in fact return a promise. To retrieve the data, use the .then() method.

test("20170707", "20170707", "20170710", "20170710")
    .then((response) => {
         console.log(response);
    });

Answer 3

Answer №2

Indeed, promise will be received only by returning a promise from this point.

return getData(pastReport, laterReport).then((res) => {
    return res; //Perform callback here...
});

This is the main return value of your test function. You have indeed returned a promise, and remember that whatever is returned within the 'then' block will only be reflected in that particular function, not in the overall return value of the test. If you prefer not to alter your code, you can utilize a callback.

Alternatively, modify it to

return getData(pastReport, laterReport)

and adjust your test call like so

test(...).then((res)=>{ 
})
Or like this
var a = await test(...)
Then the test will provide data as output.

Answer 4

Indeed, promise will be received only by returning a promise from this point.

return getData(pastReport, laterReport).then((res) => {
    return res; //Perform callback here...
});

This is the main return value of your test function. You have indeed returned a promise, and remember that whatever is returned within the 'then' block will only be reflected in that particular function, not in the overall return value of the test. If you prefer not to alter your code, you can utilize a callback.

Alternatively, modify it to

return getData(pastReport, laterReport)

and adjust your test call like so

test(...).then((res)=>{ 
})
Or like this
var a = await test(...)
Then the test will provide data as output.

The console is displaying a promise that is pending, rather than the desired data

Answer №1

Answer №2

Similar questions

Using Angular, a function can be called recursively directly from within the HTML

What could be the reason for my form submission redirecting to the PHP page?

Uncertainties surrounding the complexity of this multi-stage form

The code functions properly when run locally, however, it encounters issues when deployed

The issue of JQuery recursion not properly focusing on a textbox

Using AngularJS to access JSON files through the $http service

An instance of an object is being added instead of parameters

Using a Jasmine spy to monitor an exported function in NodeJS

Transfer the data for 'keys' and 'input text' from *ngFor to the .ts file

In functions, Typescript does not have the ability to automatically infer undefined or null checking

Designations for removing an item at a targeted subdirectory location

Sharing parameters between functions in JavaScript

Finding mongoose in an array of objects nested within another object

Exploring the concepts of AngularJS directives and resources

When using State.go(), the url in the address bar will update, but the HTML view will not be refreshed

Utilize Bootstrap button dropdown to automatically assign a selected value to a list item

The page does not appear to be updating after the onClick event when using the useState hook

I am experiencing difficulty in passing parameters to nested navigators

Creating a Gmail share button in AngularJS: A step-by-step guide

Leveraging props to set the initial value of component data in Vue 3 Composition API