异步等待行为答案

【问题标题】：Async Await Behaviour异步等待行为
【发布时间】：2019-07-28 21:17:06
【问题描述】：

理解 async/await 的简单代码让我抓狂。

我有一个单击按钮，我正在从本地存储中读取一些值并将其显示在警报框中。在显示警报之前，我想控制台记录值。

如果我理解 async/await 我的代码应该完全正确，但它以相反的顺序工作。首先警报即将到来，然后是控制台。

//点击按钮时调用的方法

findMyAge2() {
    this.getData("age").then(result => {
      console.log('Hi');
      myAge2 = result;
    });
    alert(myAge2);
  }

  async getData(key): Promise<any> {
    return await this.storage.get(`${key}`);
  }

预期结果：在控制台日志中：嗨用户界面：年龄

实际结果：用户界面：年龄在控制台日志中：嗨

【问题讨论】：

标签： node.js async-await ionic4

【解决方案1】：

JavaScript 本质上是异步的，因此当您返回 Promise 时，代码会继续执行，而 Promise 会在一段时间后解析。

async/await 是一种控制这种编程流程的方法，可以让您创建“等待”异步执行结果的同步代码。

您的问题是您想从您的 getData 函数和 await 在您的 findMyAge2 函数中返回承诺。

async function findMyAge2() {
  let result = await this.getData("age");
  console.log('Hi');
  myAge2 = result;
  alert(myAge2);
}

async getData(key): Promise<any> {
  return this.storage.get(`${key}`);
}

通过将async 关键字添加到函数中，它现在将始终返回Promise。因此，您不需要在 return 语句中使用 await。这实际上什么也没做。这就像说：

function getData(key) {
  return new Promise(resolve => {
    return localStorage.get(`${key}`).then(result => resolve(result))
  })
}

您无需在本地存储中等待该结果，因为消费者应该在结果上调用await 或.then。

【讨论】：

【解决方案2】：

试试这个方法，

findMyAge2() {
    this.getData("age").then(result => {
      console.log('Hi');
      myAge2 = result;
      alert(myAge2);
    });
  }

  async getData(key): Promise<any> {
    return await this.storage.get(`${key}`);
  }

在检索数据之前，您应该等待alert。

【讨论】：

【解决方案3】：

async/await 与 promises 一样工作，这意味着，代码被执行，你不知道它什么时候完成，你只知道 if 完成后，你想要执行其他的东西。

这正是您放入“then”函数中的内容，即在第一部分（asyc getData）执行后执行的内容。

就您的代码而言，当您单击按钮时会调用 findMyAge2，然后它会在“then”块中执行 getData 并指定从该调用获得结果后会发生什么。因此，您只需将警报移动到“then”块中，然后您就会得到您期望的结果。

var myAge2;

findMyAge2() {
    this.getData("age").then(result => {
      console.log('Hi');
      myAge2 = result;
      alert(myAge2);
    });
}

async getData(key): Promise<any> {
    return await this.storage.get(`${key}`);
}

【讨论】：