Issue with Native promise resolve outside the function

Question

I am trying to refactor jQuery promises with native promise for the below codes.

public functionA(){
    const dArray = Array<JQueryDeferred<{a:string}>>=[];
    //other lines of logic
    functionB(dArray, /*other parameters*/);

}

private functionB(dArray : Array<JQueryDeferred<{a:string}>>[], /*other arguments*/){
    //other lines of logic
    for(var i=0;i<10;i++){
        dArray.push($.Deferred());
        var ele = dArray.length-1;

        functionC(dArray[ele], /*other parameters*/)
            .done((result: { a:string}) => {
                // logic
            })
            .always() => {
                // some additional logic
        });
    }
}

private functionC(d: JQueryDeferred<{a:string}>):JQueryDeferred<{a:string}>{
        if(){//some condition

           // some other logic 
           d.resolve({ a: "completed" });

        }
    return d;
}

As the above methods involved passing deferred objects to multiple functions and array of deferred objects, just seeking help of any better method to rewrite the above with native promise like below;

public functionA(){
    const pArray = Array<Promise<{a:string}>>=[];
    //other lines of logic
    functionB(pArray, /*other parameters*/);

}

private functionB(pArray : Array<Promise<{a:string}>>[], /*other arguments*/){
    //other lines of logic
    for(var i=0;i<10;i++){
        pArray.push((new Promise<{ a:string; }>(resolve => resolvePromise = resolve)););
        var ele = pArray.length-1;

        functionC(pArray[ele], /*other parameters*/)
            .then((result: { a:string }) => {
                // logic
            })
            .finally() => {
                // some additional logic
        });
    }
}

private functionC(p: Promise<{a:string}>):Promise<{a:string}>{
        if(){//some condition
           // some other logic 
           // i am stuck here..
           p.resolve({ a: "completed"}) //no such resolve method to call
           // tried with Promise.resolve({ a: "completed"}), 
           // but my question - will it resolve same way as the index based 
           // resolve like the jQuery deferred version?

        }
    return p;
}

Thanks in advance.

Answer 1

Promises are not callbacks that you pass into a function. Promises are result values that you return from a function. They are constructed inside the function, and resolved by the logic inside the function only. Unlike a Deferred, they cannot be resolved by anyone who gets a hand on them.

From this approach, the correct code follows:

public functionA() {
    // other lines of logic
    const pArray = functionB(/* other arguments */);
}

private functionB(/* other parameters */): Array<Promise<{a:string}>> {
    //other lines of logic
    const promises: Array<Promise<{a:string}>> = [];
    for (var i=0; i<10; i++) {
        promises.push(
            functionC(/* … */).then((result: { a:string }) => {
                // logic
            }).finally() => {
                // some additional logic
            })
        );
    }
    return promises;
//  ^^^^^^^^^^^^^^^
}

private functionC(): Promise<{a:string}> {
    return new Promise<{ a:string; }>((resolve, reject) => {
//  ^^^^^^^^^^^^^^^^^^
        if (/* some condition */) {
           // some other logic 
           resolve({ a: "completed"});
        } else {
           reject(new Error());
        }
    });
}