将Promise函数映射到数组不会持久保存结果

Question

I have an object with two arrays as properties:

I want to populate the arrays by running promises in series. I fetch the result of the promises, and map a function to decorate all the items in my arrays.

While one array get populated and persist, the other get populated only while in the map function, but at the end the array is returned still empty.

Can you help to understand why?

I check the Promise is actually returned, and indeed in one case it works, not in the other.

this is my pseudo-code:

function formatMyObject( arrayOfIds ) {

// initialize the objet
var myObj = {
   decorators = [],
   nodes = []
   ...
}

// I map the Promise reconciliate() and push the results in the array:

return reconciliateNode(arrayOfIds)
       .then( data => { 
             data.map( node => {
                //  I fetch results, and   myObj.nodes

             myObj.nodes.push( { ...   })
            })

       })

     return myObj
    })
   .then( myObj => {

      // myObj.nodes is now a NON empty array

      // I want to the same with myObj.decorators:

      var data = myObj.nodes

      // I think I am doing just as above:

      data.map( node => 
          decorateNode(node.source)
            .then( decoration => {

              decoration = decoration[node.source]

              myObj['decorators'].push( {
                    ... 
              } )

              // I check: the array is NOT empty and getting populated:
              console.log('myObj.decorators', myObj)
              debugger
          })
    )

    // instead now, just after the map() function, myObj.decorators is EMPTY!
    console.log('myObj.decorators', myObj);
    debugger


    return myObj
)

... // other stuff
}

Answer 1

As in the second case the map callback returns a promise, that case is quite different from the first case.

In the second case, you would need to await all those promises, for which you can use Promise.all .

The code for the second part could look like this:

.then( myObj => {
    return Promise.all(myObj.nodes.map(node => decorateNode(node.source)));
}).then(decorations => {
    myObj.decorators = decorations.map(decoration => {
        decoration = decoration[node.source];
        return ({
            ... 
        });
    })
    console.log('myObj.decorators', myObj);
    return myObj;
})