Question

理解异步/等待的简单代码使我发疯。

我点击了一个按钮，我正在从localstorage读取一些值并将其显示在警报框中。在显示警报之前，我要console.log值。

如果我理解async / await，我的代码应该是d，但它以相反的顺序工作。首先是警报，然后是控制台。

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

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 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。因此，您无需在await语句中return。那实际上什么也没做。就像是说：

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

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

Answer 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。

Answer 3

async / await的工作方式类似于promise，这意味着代码将被执行，并且您不知道它何时会完成，只是知道如果完成后便希望执行其他操作。

这正是您放在“ 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}`);
}

异步等待行为

3 个答案: