Can't change promise pending status after using then()

Question

I'm trying to load a CSV file into my application at the beginning and keep the value in a variable and call it from other functions instead of accessing by then all the time

my code is

var DVizModule = (() => {

    let dataset = [];

    let _data = async () => {
        const data = await d3.csv("data/alphabet.csv");
        return data;
    }
    let data = _data().then(data => {
        dataset = data;
        return dataset;
    })

    return {
        data: data
    }
})();
console.log(DVizModule.data);

it returns

Promise pending proto: Promise

PromiseStatus: "resolved"

PromiseValue: Array(26)

When I write

const t = async function() {
    const data = await d3.csv("data/alphabet.csv");
    return data;
}
t().then(result => console.log(result))

it returns the file perfectly I'm trying to access the file content via

DVizModule.data

`console.log(DVizModule.data);` runs before the data is loaded, but it will get stored when the request has finished. Here's example code: https://jsfiddle.net/khrismuc/rjcudnb1/ — , Feb 19 '20 at 13:11
The first version is like ordering a pizza online and then look at your plate... which is (surprise, surprise) still empty. You only have the promise that someone will come to your door and deliver the pizza. In the second version, you *do* actually wait for the delivery (`then`). — trincot, Feb 19 '20 at 17:58
Note that you are wrapping the `csv` method without any gain. You can just do `d3.csv("data/alphabet.csv").then(console.log)`. — trincot, Feb 19 '20 at 17:59

score 0 · Answer 1 · answered Feb 19 '20 at 13:10

0

If you want to access data synchronously, you should declare it as a plain value, not a promise. something like this should do the trick:

const DVizModule = {};
d3.csv("data/alphabet.csv").then(data => DVizModule.data = data);

Note, of course, that DVizModule.data will be undefined until the request is actually complete. If you want to ensure that the value actually is there, you will have to wrap the outer context into an async function and await the data at the very beginning. This way you can both ensure that the value is present when you code accesses it and use it in a synchronous manner.

Hope I got your question right and not trying to resolve the wrong problem ;)

answered Feb 19 '20 at 13:10

NoSock

90
7

I had something like your code, why should I rewrite it again like this ? all I want is simple DVizModule.data return the asynchronous data and I want is all these async , wait function happen behind the scene and return when I call DVizModule.data – zEn feeLo Feb 19 '20 at 13:53
@iKamy if the desired behavior here is "Once `DVizModule.data` is accessed, it should block the main thread and wait for the result before returning it", than that's intentionally not a feature the language provides. This kind of behavior will cause the user to stare at an unresponsive screen (yes, even scrolling will not work) until the promise is resolved. Therefore, you have to work with promises (whether it be `.then` or `async/await`). Consider the second part of my answer if you really need the simplicity of `DVizModule.data` access call. – NoSock Feb 20 '20 at 14:52
I was looking for this (async () => { console.log(await DVizModule.data) })() if you change your answer I will accept it – zEn feeLo Feb 21 '20 at 17:23

Can't change promise pending status after using then()

1 Answers1