等待一个 function 结束后再开始下一个

Question

我正在使用 Angular 开发 Ionic v4。

在我的项目中，我使用 BLE 与树莓派进行通信。

我有几个步骤：

1. 搜索我周围的设备
2. 连接到此设备
3. 激活通知
4. 发送信息

目前我有类似的东西：

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 => {
              })
            })
          })
        })
      })
    })
  })
}

我想做这样的事情：

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

问题：我的 function 'myConnect' 不要等到 'myScan' 结束才开始。 所以'myConnect' 需要的一些东西是在'myScan' 中完成的。

我已经尝试使用 'async/await' 但不起作用。 我认为我没有正确使用它：

 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));
               });
           });
       });
   });

帮助我了解如何创建一个等待前一个结束的 function 开始：D

Answer 1

只需使用 async/await 或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));

Answer 2

关键字 await 使 JavaScript 等到 promise 解决并返回其结果。

所以你不需要在await this.myConnect().then(()=>{});中使用then

使用await this.myConnect() ；

以下是帮助您更好理解的示例

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();

Answer 3

尝试这个：

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
}

Answer 4

这基本上就是 Promise 的目的。

Promise 是一个 object 代表异步操作的最终完成或失败。

您可以在此处阅读有关 Promises 的信息。 阅读完之后，我在下面为您留下了一个示例，以演示如何使用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>

Answer 5

我会拥抱 Observables。 看你想要什么。。

1. 搜索我周围的设备
2. 连接到此设备
3. 激活通知
4. 发送信息

1 和 2 将与switchMap链接，因为响应相互依赖。 然后 3 和 4 可以按顺序执行，但不相互依赖，因此我们可以将它们与concat一起使用。 （如果这不是正确的流量，请使用这两个运算符进行相应调整）。

所以我建议如下：

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))

Answer 6

你这么近！ 而不是使用.then和async只使用其中一个。 这里有一些方法来完成你正在尝试做的事情：

使用.then ：

这是典型的链接语法。 Promise 可以使用.then()链接并传入 function。 如果返回值是一个值（不是Promise ），那么它将解析为该值。 但是，如果它确实返回了Promise那么它将链接在一起，并且您的下一个 .then .then()将解析为“内部”异步调用结果。

// 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 => {  })

使用async / await

这种方法实现了相同的结果，但使用特殊的关键字自动将 Promise 链接在一起。 async / await允许您跳过.then()并return调用，以便您可以调用异步函数，就好像它们是同步的一样。

// 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);

要了解有关Promise和异步 javascript 的更多信息，请查看以下资源：

• MDN 上的承诺
• Google Web 上的承诺
• 异步/等待视频