Chaining Promises correctly

Question

I want to create a list if it doesn't exist and then create the fields, aka ensure. I'm having trouble understanding how to set the promises:

public getLocations(): Promise<ILocations[]> {
    let promise: Promise<ILocations[]> = new Promise<ILocations[]>((resolve, reject): void => {
        sp.web.lists.ensure("DeliveryBoardLocations")
            .then((ler: ListEnsureResult): Promise<ListEnsureResult> => {
                console.log("got list ensure result");

                if (ler.created) {
                    console.log("Locations was created");

                    let batch = sp.web.createBatch();

                    ler.list.fields.inBatch(batch).addText("textField");
                    ler.list.fields.inBatch(batch).addDateTime("dateField");
                    ler.list.fields.inBatch(batch).addBoolean("booleanField");

                    batch.execute()
                        .then((): Promise<ListEnsureResult> => {
                            console.log("fields created");

                            let batch = sp.web.createBatch();
                            let view = ler.list.defaultView;

                            view.fields.inBatch(batch).add("textField");
                            view.fields.inBatch(batch).add("dateField");
                            view.fields.inBatch(batch).add("booleanField");

                            batch.execute()
                                .then((): Promise<ListEnsureResult> => {
                                    console.log("fields added to view; returning ler");

                                    return ler;
                                });
                        });

                    // return;
                }
                else {
                    console.log("Locations already existed; returning ler");

                    resolve(ler.list);
                    return Promise.reject("List Exists");
                }

                console.log("after if stmt");
            })
            .then((ler): void => {
                console.log("ler: ", ler);
                console.log("ler.list: ", ler.list);
                console.log("ler.list.items: ", ler.list.items);

                resolve(ler.list.items.getAll());
            });
    });

    return promise;
}

Console shows:

LocationsService.ts:16 got list ensure result
LocationsService.ts:19 Locations was created
LocationsService.ts:56 after if stmt
LocationsService.ts:59 ler:  undefined
LocationsService.ts:31 fields created
LocationsService.ts:43 fields added to view; returning ler

I want to call ensure; if result comes back that the list was created then create the columns and display them. Then return the list so I can get all the items and return the items. If the list is created, return the items.

I'm having trouble figuring out how this should be handled.

Answer 1

The essential failing of the code is missing returns, which, in the case of promise chains, convey data and control flow.

You can also purge the new Promise() wrapper. The chain starting sp.web.lists.ensure() is perfectly adequate without the wrapper.

You also need to address the type casting clauses. Promise<ListEnsureResult> is probably not correct in all cases. Try <any> to get yourself started.

public getLocations(): Promise<ILocations[]> {
    // let promise: Promise<ILocations[]> = new Promise<ILocations[]>((resolve, reject): void => { // not necessary
        return sp.web.lists.ensure('DeliveryBoardLocations')
        ^^^^^^
        .then((ler: ListEnsureResult): Promise<ListEnsureResult> => { // <any> ?
            if (ler.created) {
                let batch = sp.web.createBatch();
                ler.list.fields.inBatch(batch).addText('textField');
                ler.list.fields.inBatch(batch).addDateTime('dateField');
                ler.list.fields.inBatch(batch).addBoolean('booleanField');
                return batch.execute()
                ^^^^^^
                .then((): Promise<ListEnsureResult> => { // <any> ?
                    let batch = sp.web.createBatch();
                    let view = ler.list.defaultView;
                    view.fields.inBatch(batch).add('textField');
                    view.fields.inBatch(batch).add('dateField');
                    view.fields.inBatch(batch).add('booleanField');
                    return batch.execute()
                    ^^^^^^
                    .then((): Promise<ListEnsureResult> => ler); // <any> ?
                });
            }
            else {
                // resolve(ler.list); // not necessary 
                // return Promise.reject('List Exists'); // eek, confounding after resolve.
                throw new Error('List Exists'); // it's more economical to throw rather than return Promise.reject(...). Also, be sure to throw an Error() object. 
            }
        })
        .then((ler): void => {
            // resolve(ler.list.items.getAll()); // not necessary
            return ler.list.items.getAll();
        });
    // });
    // return promise;
}

In practice, you might choose to simplify slightly by rearranging (and cleaning up):

public getLocations(): Promise<ILocations[]> {
    return sp.web.lists.ensure('DeliveryBoardLocations')
    .then((ler: ListEnsureResult): Promise<any> => {
        if (ler.created) {
            let batch = sp.web.createBatch();
            ler.list.fields.inBatch(batch).addText('textField');
            ler.list.fields.inBatch(batch).addDateTime('dateField');
            ler.list.fields.inBatch(batch).addBoolean('booleanField');
            return batch.execute()
            .then((): Promise<any> => {
                let batch = sp.web.createBatch();
                let view = ler.list.defaultView;
                view.fields.inBatch(batch).add('textField');
                view.fields.inBatch(batch).add('dateField');
                view.fields.inBatch(batch).add('booleanField');
                return batch.execute();
            })
            .then(() => ler.list.items.getAll()); // rearranged
        } else {
            throw new Error('List Exists');
        }
    });
}

Answer 2

You need to actually return the batch promises, otherwise the outer-wrapping promise just immediately finishes executing instead of waiting for them and giving the result.

return batch.execute()
    .then((): Promise<ListEnsureResult> => {
        console.log("fields created");

        let batch = sp.web.createBatch();
        let view = ler.list.defaultView;

        view.fields.inBatch(batch).add("textField");
        view.fields.inBatch(batch).add("dateField");
        view.fields.inBatch(batch).add("booleanField");

        return batch.execute()
            .then((): Promise<ListEnsureResult> => {
                console.log("fields added to view; returning ler");

                return ler;
            });
    });