异步等待行为

Question

一段简单易懂的代码async/await快把我逼疯了。

我点击了一个按钮，我正在从本地存储中读取一些值并将其显示在警告框中。在显示警报之前，我想 console.log 该值。

如果我理解 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}`);
  }

预期结果：在控制台日志中：嗨 UI：年龄

实际结果： UI：年龄在控制台日志中：嗨

Answer 1

试试这个方法，

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。

Answer 2

async/await 的工作方式与 promises 类似，这意味着代码被执行但您不知道它何时会完成，您只知道在 if 完成后，您想要执行其他内容。

这正是您放入 "then" 函数中的内容，即在第一部分 (asyc getData) 执行后执行的内容。

对于您的代码，当您单击按钮时会调用 findMyAge2，然后它会执行 getData 并在 "then" 块中指定从该调用获取结果后发生的情况。因此，您只需将警报移动到 "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}`);
}

Answer 3

JavaScript 本质上是异步的，所以当你有一个 Promise returned 时，代码继续执行并且 Promise 稍后解析。

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

你的问题是你想 return 来自你的 getData 函数的 promise 和 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 关键字，它现在总是 return 一个 Promise。所以你不需要 await 在你的 return 语句中。这实际上什么都不做。这就像在说：

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

您不需要在本地存储中等待该结果，因为无论如何消费者都应该对结果调用 await 或 .then。

异步等待行为

Async Await Behaviour

node.js

async-await

ionic4