打字稿中的异步等待

Question

我在这里寻找过类似的问题，但找不到足够相似的问题。将 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);
  });
}

呈现选择器并得到结果的函数是这样的：

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

}

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

Answer 1

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

归结为使用 async ... await 或 ...then( () => {}) 来处理 promise 之间的区别。我来自 c# 背景，所以我对 async / await 非常满意，因为它几乎按照所说的去做。然而，我发现在 TypeScript 中我不得不使用 await 并将其与 .then( 等) 结合使用的情况。

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

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

解决了排序问题，但返回的是未定义的..或者调用函数：

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

}

一切正常。

非常感谢那些仍然回答的人。

打字稿中的异步等待

Async Await in Typescript

typescript

angular

ionic4