Promise and resolve problem

I am trying to update the min, max, start and end properties of a slider component. I need to run a query first to get the values for this.

The query is run with a promise/then structure as below:
getSPCData.data = new Promise(resolve => {
resolve(getSPCData.trigger())
}).then( () => {
sliderProps.setValue({"start": 0,
"end": getSPCData.data.data.length,
"min": 0,
"max": getSPCData.data.data.length});
getColors.trigger();
});

The getColors query gets executed as expected, but the sliderProps.setValue() function never succeeds. The value of this variable never changes. If I change the getSPCData.data.data.length to a hardcoded value, like 1000, it sets the variable accordingly.

These are the slider properties:
image

I am lost...I also tried it this way:
querySpecs.data = new Promise(resolve1 => {
resolve1(getSPCData.trigger())
}).then(resolve2 => {
resolve2(getColors.trigger())
}).then(sliderProps.setValue({
"start": 0,
"end": getSPCData.data.data.length,
"min": 0,
"max": getSPCData.data.data.length
}));

Any suggestions how to solve this? Thank you.

How about

getSPCData.data = (async () => {
    const foo = await getSPCData.trigger();
    return foo;
})().then((foo) => {
    sliderProps.setValue({
        "start": 0,
        "end": foo.data.length,
        "min": 0,
        "max": foo.data.length
    });
    getColors.trigger();
});

Note: There are a lot of objects named "data" in your code so I changed one to foo to help think through it.

I just copied your code in and it works. I am trying to understand how this is different to my approach using the Promise constructor.

You are basically creating your own async function foo, await its return and return the result, from which then() is called?

I'm not totally sure. My version is just me trying to be explicit about setting foo as the value returned by getSPCData, and then passing that to the next section.

Couldn't this just be:

await getSPCData.trigger()

sliderProps.setValue({
  "start": 0,
  "end": getSPCData.data.data.length, // getSPCData returns a 'data' key within 'data'?
  "min": 0,
  "max": getSPCData.data.data.length});

getColors.trigger();
1 Like