I'm working on Ionic v4 with Angular.

In my project i use the BLE to municate with a raspberry.

I have several step :

1. Search Device around me
2. Connect to this device
3. Activate Notification
4. Send Messages

Currently i have something like :

this.ble.scan().subscribe(result => {
  if (device === theDeviceIWant) {
    this.ble.connect(device.id).subscribe(result => {
      this.ble.startNotification(infosaboutDevice).subscribe(result => {
        // Message 1
        this.ble.writeWithoutResponse(infos, message).then(result => {
          // Message 2
          this.ble.writeWithoutResponse(infos, message).then(result => { 
            // Message 3
            this.ble.writeWithoutResponse(infos, message).then(result => {
              // Message X
              this.ble.writeWithoutResponse(infos, message).then(result => {
              })
            })
          })
        })
      })
    })
  })
}

I want to do something like that :

this.myScan();
this.myConnect();
this.myNotification();
this.myMessage('Text 1');
this.myMessage('Text 2');
this.myMessage('Text X');

The probleme : My function ‘myConnect‘ don't wait the end of ‘myScan‘ to start. So somme stuff needed by ‘myConnect‘ is do in ‘myScan‘.

I already try to use ‘async/await‘ but does not work. I think i don't use it correctly :

 await this.myConnect().then(async () => {
       await this.myNotification().then(async () => {
           await this.myMessage('03020000').then(async () => {
               await this.myMessage('010100').then(async () => {
                   await this.myMessage('020200' + this.random.toString(16));
               });
           });
       });
   });

Help me to understand how to create a function who wait the end of the before one to start :D

I'm working on Ionic v4 with Angular.

In my project i use the BLE to municate with a raspberry.

I have several step :

1. Search Device around me
2. Connect to this device
3. Activate Notification
4. Send Messages

Currently i have something like :

this.ble.scan().subscribe(result => {
  if (device === theDeviceIWant) {
    this.ble.connect(device.id).subscribe(result => {
      this.ble.startNotification(infosaboutDevice).subscribe(result => {
        // Message 1
        this.ble.writeWithoutResponse(infos, message).then(result => {
          // Message 2
          this.ble.writeWithoutResponse(infos, message).then(result => { 
            // Message 3
            this.ble.writeWithoutResponse(infos, message).then(result => {
              // Message X
              this.ble.writeWithoutResponse(infos, message).then(result => {
              })
            })
          })
        })
      })
    })
  })
}

I want to do something like that :

this.myScan();
this.myConnect();
this.myNotification();
this.myMessage('Text 1');
this.myMessage('Text 2');
this.myMessage('Text X');

The probleme : My function ‘myConnect‘ don't wait the end of ‘myScan‘ to start. So somme stuff needed by ‘myConnect‘ is do in ‘myScan‘.

I already try to use ‘async/await‘ but does not work. I think i don't use it correctly :

 await this.myConnect().then(async () => {
       await this.myNotification().then(async () => {
           await this.myMessage('03020000').then(async () => {
               await this.myMessage('010100').then(async () => {
                   await this.myMessage('020200' + this.random.toString(16));
               });
           });
       });
   });

Help me to understand how to create a function who wait the end of the before one to start :D

• javascript
• angular
• ionic-framework
• async-await
• es6-promise

Share Improve this question Follow edited Nov 19, 2019 at 18:04 Saurabh Yadav 3,38611 gold badge1111 silver badges2121 bronze badges asked Nov 19, 2019 at 15:54 Amaury LarozeAmaury Laroze 21733 silver badges1414 bronze badges 1

• Your last block of code looks pletly strange (and can be simplified to what I posted in my answer), but it should actually even do what you want. So I think your actual problem is in the implementations of myXXX functions. You probably don't return the "right" promise there. Can you show a full example that is not working? – hansmaad Commented Nov 20, 2019 at 7:27

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 5

Just use async/await OR then

 await this.myConnect();  // this awaits the Promise returned by myConnect to be resolved
 await this.myNotification();  // same for this Promise
 await this.myMessage('03020000');  // and so on...
 await this.myMessage('010100');
 await this.myMessage('020200' + this.random.toString(16));

The keyword await makes JavaScript wait until that promise settles and returns its result.

So you dont need to use then in await this.myConnect().then(()=>{});

use await this.myConnect();

Below is example which help you understand better

function SignalOne() {

        return new Promise((resolve, reject) => {
            setTimeout(()=>{
                resolve('Hello iam signal one');
            }, 2000);
        });

    }

    function SignalTwo() {

        return new Promise((resolve, reject) => {
            setTimeout(()=>{
                resolve('Hello iam signal Two');
            }, 1000);
        });

    }

    async function sendSignal() {
        let one = await SignalOne();
        let two = await SignalTwo();
        console.log(one);
        console.log(two);

    }

    sendSignal();

Try this:

async myScan() {
   // do things
}

ngOnInit() {
   const scan = this.myScan(); // myScan doesn't actually have to return here
   await scan;
   const connect = this.myConnect();
   await connect;
   // more stuff
}

This is essentially what Promises are made for.

A Promise is an object representing the eventual pletion or failure of an asynchronous operation.

You can read up about Promises here. Once you read thru that, I left an example for you below to demonstrate how to use a Promise:

//Wrap the operation you want to wait for in a Promise (in this case: setTimeout)
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('3 seconds have passed');
  }, 3000);
});

//Once the operation is resolved the callback in the .then will be called
promise.then(val => document.querySelector('#target').innerHTML = val);

<div id="target">This message will change once the operation is resolved in 3 seconds.</div>

I would embrace Observables. Looking at what you want..

1. Search Device around me
2. Connect to this device
3. Activate Notification
4. Send Messages

1 and 2 would be chained with switchMap, as responses depend on each other. Then 3 and 4 could be performed in order, but not dependent on each other, therefore we could use concat with those. (If this is not correct flow, adjust accordingly with these two operators).

So I suggest the following:

import { never } from 'rxjs';
import { switchMap, concat } from 'rxjs/operators';

// ...

this.ble.scan().pipe(
  switchMap((device) => {
    if (device === theDeviceIWant) { 
      return this.ble.connect(device.id)
    }
    // terminates rest of code
    return never();
  }),
  concat(
    this.ble.startNotification(...),
    this.ble.writeWithoutResponse(...)
  )
).subscribe(data => console.log(data))

You're so close! Rather than using .then and async just use one or the other. Here are a few ways to acplish what you are trying to do:

Using .then:

This is your typical chaining syntax. Promises can be chained using .then() and passing in a function. If the return value is a value (not a Promise) then it will resolve to that value. But if it did return a Promise then it will chain together and your next .then() will resolve to the "inner" async call result.

// Message 1
return this.ble.writeWithoutResponse(infos, message).then(result1 => {
  // Message 2
  return this.ble.writeWithoutResponse(infos, message);
}).then(result2 => { 
  // Message 3
  return this.ble.writeWithoutResponse(infos, message);
)}.then(result3 => {
  // Message X
  return this.ble.writeWithoutResponse(infos, message);
}).then(result4 => {  })

Using async/await

This approach achieves the same result but uses special keywords to automatically chain promises together. async/await allows you to skip the .then() and return calls so you can invoke your async functions as if they were synchronous.

// Message 1
let result1 = await this.ble.writeWithoutResponse(infos, message)
// Message 2
let result2 = await this.ble.writeWithoutResponse(infos, message);
// Message 3
let result3 = await this.ble.writeWithoutResponse(infos, message);
// Message X
let result4 = await this.ble.writeWithoutResponse(infos, message);

To learn more about Promise's and async javascript, check out these resources:

• Promises on MDN
• Promises on Google Web Fundamentals
• Video on Async/Await