Are Complex Pledges Possible in Typescript or Javascript?

Question

Are Complex Pledges Possible in Typescript or Javascript?

I've encountered a problem while developing my Angular2-based mobile app using Typescript with Nativescript runtime. The issue revolves around Promises when working with Bluetooth functions in my HomeComponent. These Bluetooth functions require human interaction and have wait periods for scanning, which results in delayed completion of several seconds.

To tackle this issue, I decided to abstract these methods as promises. Here's what I did:

HomeComponent.ts:

bluetoothAdd() {
    this.isScanning = true;
    this._ble.scan().then(
        // Log the fulfillment value
        function (val) {
            this.isScanning = false; //hide activity indicator
            this.Connect(this.ble._peripheral);
        })
        .catch(
        function (reason) {
            this.isScanning = false; //hide activity indicator
            console.log('Handle rejected promise (' + reason + ') here.');
        });
}

BluetoothUtils.ts (this is imported above as this._ble):

var devices: Array<string>;
var _peripheral: any;

export function scan() {
    return new Promise((resolve, reject) => {
        bluetooth.hasCoarseLocationPermission().then(
            (granted) => {
                if (!granted) {
                    bluetooth.requestCoarseLocationPermission();
                } else {
                    bluetooth.startScanning({
                        serviceUUIDs: ["133d"],
                        seconds: 4,
                        onDiscovered: (peripheral) => {
                            console.log("Periperhal found with UUID: " + peripheral.UUID);
                        }
                    }).then(() => {
                        console.log("scanning complete");

                    }, (err) => {
                        console.log("error while scanning: " + err);
                    });
                }
            });
    });
}

During debugging, when bluetoothAdd() is called in my HomeComponent, the scan() function in BluetoothUtils behaves as expected. Under certain circumstances, it even displays an error message saying:

error while scanning: Bluetooth is not enabled

However, neither the then nor the catch parts of the HomeComponent's this._ble.scan() promise are executed. Why is this happening? Can you nest Promises (i.e., a promise within a promise) as I am attempting here? Any suggestions on how to debug this further?

javascript typescript angular promise nativescript

Answer 1

Answer №1

There are a couple of issues to address.

1/ The use of an anti pattern is unnecessary in this scenario. Creating a new promise in scan when dealing solely with promises is redundant.

2/a) If opting to continue with the anti pattern, remember to invoke the resolve and reject functions. Currently, the new promise remains unresolved, causing the "main" promise in scan to stay in limbo.

2/b) A more effective approach is to return the existing promises instead of creating new ones. Failing to return them will result in separate branches of promises, which will not impact the "main" branch in scan. See the improved solution below:

export function scan() {
    return bluetooth.hasCoarseLocationPermission().then(
        (granted) => {
            if (!granted) {
                return bluetooth.requestCoarseLocationPermission();
            } else {
                return bluetooth.startScanning({
                    serviceUUIDs: ["133d"],
                    seconds: 4,
                    onDiscovered: (peripheral) => {
                        console.log("Peripheral found with UUID: " + peripheral.UUID);
                    }
                }).then(() => {
                    console.log("Scanning complete");

                }, (err) => {
                    console.log("Error while scanning: " + err);
                });
            }
        });
}

Note the three additional returns: one at the beginning of scan, and before

bluetooth.requestCoarseLocationPermission

and bluetooth.startScanning.

To explore other common promise anti patterns, check out this informative resource.

Answer 2

There are a couple of issues to address.

1/ The use of an anti pattern is unnecessary in this scenario. Creating a new promise in scan when dealing solely with promises is redundant.

2/a) If opting to continue with the anti pattern, remember to invoke the resolve and reject functions. Currently, the new promise remains unresolved, causing the "main" promise in scan to stay in limbo.

2/b) A more effective approach is to return the existing promises instead of creating new ones. Failing to return them will result in separate branches of promises, which will not impact the "main" branch in scan. See the improved solution below:

export function scan() {
    return bluetooth.hasCoarseLocationPermission().then(
        (granted) => {
            if (!granted) {
                return bluetooth.requestCoarseLocationPermission();
            } else {
                return bluetooth.startScanning({
                    serviceUUIDs: ["133d"],
                    seconds: 4,
                    onDiscovered: (peripheral) => {
                        console.log("Peripheral found with UUID: " + peripheral.UUID);
                    }
                }).then(() => {
                    console.log("Scanning complete");

                }, (err) => {
                    console.log("Error while scanning: " + err);
                });
            }
        });
}

Note the three additional returns: one at the beginning of scan, and before

bluetooth.requestCoarseLocationPermission

and bluetooth.startScanning.

To explore other common promise anti patterns, check out this informative resource.

Answer 3

Answer №2

When working with typescript, it's advisable to avoid using the traditional way of handling asynchronous operations with await/async. This improves code clarity, especially when dealing with multiple promises simultaneously.

async function bluetoothAdd() {
    this.isScanning = true;
    try {
        const val = await this._ble.scan();
        this.Connect(this.ble._peripheral);
    } catch (reason) {
        console.log('Handle rejected promise (' + reason + ') here.');
    }finally{
        this.isScanning = false;
    }
}


// Bluetoo.....ts
var devices: Array<string>;
var _peripheral: any;

export async function scan() {
    const granted = await bluetooth.hasCoarseLocationPermission();
    if(!granted){
        return bluetooth.requestCoarseLocationPermission();
    }else{
        try {
            const val = await bluetooth.startScanning({
                    serviceUUIDs: ["133d"],
                    seconds: 4,
                    onDiscovered: (peripheral) => {
                        console.log("Periperhal found with UUID: " + peripheral.UUID);
                    }
                });
            console.log("scanning complete");
            return val;
        } catch (err) {
            // you can rethrow err here such that user `bluetoothAdd` will recieve it/
            console.log("error while scanning: " + err);
        }
    }
}

Answer 4

When working with typescript, it's advisable to avoid using the traditional way of handling asynchronous operations with await/async. This improves code clarity, especially when dealing with multiple promises simultaneously.

async function bluetoothAdd() {
    this.isScanning = true;
    try {
        const val = await this._ble.scan();
        this.Connect(this.ble._peripheral);
    } catch (reason) {
        console.log('Handle rejected promise (' + reason + ') here.');
    }finally{
        this.isScanning = false;
    }
}


// Bluetoo.....ts
var devices: Array<string>;
var _peripheral: any;

export async function scan() {
    const granted = await bluetooth.hasCoarseLocationPermission();
    if(!granted){
        return bluetooth.requestCoarseLocationPermission();
    }else{
        try {
            const val = await bluetooth.startScanning({
                    serviceUUIDs: ["133d"],
                    seconds: 4,
                    onDiscovered: (peripheral) => {
                        console.log("Periperhal found with UUID: " + peripheral.UUID);
                    }
                });
            console.log("scanning complete");
            return val;
        } catch (err) {
            // you can rethrow err here such that user `bluetoothAdd` will recieve it/
            console.log("error while scanning: " + err);
        }
    }
}

Answer 5

Answer №3

Upon further examination, it appears that the initial code block within the first "then" statement may not be returning any value, specifically a promise. A proper sequence would involve returning something like 'bluetooth.startScanning(...)' in order to fulfill the expected behavior. While it is possible to nest promises, a more organized approach would involve chaining them together for improved readability. In this case, consider moving the following console.log statement to the same level of nesting as the preceding "then" statement for a clearer structure.

Answer 6

Upon further examination, it appears that the initial code block within the first "then" statement may not be returning any value, specifically a promise. A proper sequence would involve returning something like 'bluetooth.startScanning(...)' in order to fulfill the expected behavior. While it is possible to nest promises, a more organized approach would involve chaining them together for improved readability. In this case, consider moving the following console.log statement to the same level of nesting as the preceding "then" statement for a clearer structure.

Are Complex Pledges Possible in Typescript or Javascript?

HomeComponent.ts:

BluetoothUtils.ts (this is imported above as this._ble):

Answer №1

Answer №2

Answer №3

Similar questions

"Graphs not Displaying Properly in ChartJs

Using the jQuery before() method to manipulate form fields

Utilizing IBM Worklight: Maximizing Function Reusability in a Multi-Page Application

Struggling to transfer information from JavaScript to Python Flask?

Is there a way to modify the document title using .ready()?

Automated configuration of AWS Amplify JavaScript using Gitpod

Issue with triggering onclick event in both parent and child components

After a span of two minutes, the Node.js and Express server terminates the connection

Stop the items from moving around in a cdkDropList in Angular Material

Sorting from HTML5 Local Storage

Encountered a problem while initiating the HTTP server in a node.js

Use patchValue to assign a value and make the field inactive

I am facing an issue with properly linking my jQuery

Guide on dynamically adding elements to an array in key value format

Error message: "SyntaxError: Unexpected token import was not caught by the foundation"

Guide on integrating next-images with rewrite in next.config.js

What is the best approach to extracting tightly-coupled code and converting it into an external library?

The resolution of custom Vue modules appears to be malfunctioning

Executing gruntfile from the devDependencies module

Failed to retrieve the item stored in the local storage