打字稿中的异步等待答案

【问题标题】：Async Await in Typescript打字稿中的异步等待
【发布时间】：2019-06-12 23:26:20
【问题描述】：

我在这里寻找过类似的问题，但找不到足够类似的问题。将 Ionic 4 与 Angular 7 Typescript 3.16 一起使用我有几个'TimeSpan'值我需要得到所以有一个来自html的函数，如下所示：

<ion-input type="text" (click) =" getTypTime()" ....>

这个点击处理程序是这样的：

getTypTime() { // Gets the typical time
  const currentTime = this.service.TimeToDoTypicalOrBestCase;
  this.getTime(currentTime).then( res => {
  console.log('GetTypTime result :');        // **3**
  console.log(res);
  });
}

呈现picker并获取结果的函数如下：

async getTime(inputTime: TimeSpan) {
console.log(inputTime);             // **1**
const opts: PickerOptions = {
  buttons: [
        ...more stuff...
  ],
  columns: [
    {
      name: 'Hours',
        ...more stuff...
      ]
    },
    {
      name: 'Mins',
           ...more stuff...
    }
  ]
};
const picker = await this.pickerCtrl.create(opts);
console.log('Presenting picker');             // **2**
picker.present();
picker.onDidDismiss().then(() => {
  picker.getColumn('Hours').then( colh => {
    this.pickedTime.hours = colh.options[colh.selectedIndex].value;
    picker.getColumn('Mins').then( colm => {
    this.pickedTime.minutes = colm.options[colm.selectedIndex].value;
    console.log(this.pickedTime);             // **4**
    return this.pickedTime.ToString();
    });
  });
 });
}

日志输出：

00:30:00                       (This is a the top of the function **1** see code)
Presenting picker              (This is towards the end of the function **2**)
GetTypTime result : undefined  (This is in the CALLING function **3**)  
(The following line displayed after the dismiss **4**) 
TimeSpan {_seconds: 0, _minutes: 0, _hours: 0, _ days: 0, _milliseconds: 0, …}

该函数显然在从选择器的 ondismiss 实际返回之前返回，但我觉得这应该有效。谁能指出我哪里出错了..？

我已将其更改为不再使用 await... 之前，它是这样的：

  picker.onDidDismiss().then(async () => {
  let col = await picker.getColumn('Hours');
  this.pickedTime.hours = col.options[col.selectedIndex].value;
  col = await picker.getColumn('Mins');
  this.pickedTime.minutes = col.options[col.selectedIndex].value;
  console.log(this.pickedTime);
  return this.pickedTime.ToString();
});

}

但这没有用，所以我对其进行了修改以删除等待.. 想法？

【问题讨论】：

标签： angular typescript ionic4

【解决方案1】：

我已经解决了这个问题，但我承认我仍然没有完全理解这个问题。但是，我已经这样做了，以防其他人陷入类似的混乱。

这取决于使用 async ... await 或 ...then( () => {}) 来处理 Promise 之间的区别。我来自 c# 背景，所以对 async / await 非常满意，因为它几乎可以做到所说的。然而，我在 TypeScript 中发现了必须使用 await 并将其与 .then( 等) 结合使用的情况。

无论如何，我确实通过将其转换为一直等待甚至将其添加到调用函数来解决它。这样做：

const picker = await this.pickerCtrl.create(opts);
await picker.present();
await picker.onDidDismiss();
const colh = await picker.getColumn('Hours');
this.pickedTime.hours = colh.options[colh.selectedIndex].value;
const colm = await picker.getColumn('Mins');
this.pickedTime.minutes = colm.options[colm.selectedIndex].value;
return this.pickedTime.ToString();

解决了排序问题，但返回 undefined.. 或者更确切地说是调用函数：

  getTypTime() { // Gets the typical time
    const currentTime = this.service.TimeToDoTypicalOrBestCase;
    this.getTime(currentTime).then( res => {
    console.log('GetTypTime result :');
    console.log(res);
    });
  }

显示未定义。只有当我把它修改成这样：

  async getTypTime() { // Gets the typical time
  const currentTime = this.service.TimeToDoTypicalOrBestCase;
  const res = await this.getTime(currentTime);
  console.log('GetTypTime result :');
  console.log(res);

}

一切正常。

因此，感谢那些仍然回答的人。

【讨论】：