javascript - 在 Javascript 中，async await 是否等待所有嵌套函数完成？

Question

在下面的示例中，我需要在 fetch 方法中进行 fetchData 调用之前重置一些值。 async await 是否等待 reset 方法中的所有功能完成后再继续？

fetch = async () => {
  await this.reset();
  this.props.fetchData();
};

reset = () => {
  this.props.resetFilter();
  this.props.resetClient();
  this.props.resetUser();
};

或者您是否必须执行以下操作？

fetch = () => {
  this.reset().then(() => {
    this.props.fetchData();
  });
};

reset = async () => {
  await this.props.resetFilter();
  await this.props.resetClient();
  await this.props.resetUser();
};

谢谢:)

Answer 1

async/await 并没有神奇地处理异步函数。它是一种语法添加，可让您更轻松地使用 promises。

因此，无论何时函数返回一个 Promise，您都需要明确地等待它。

如果你想按顺序执行它们，可以在每个前面写上 await，如你在第二个示例中所示:

reset = async () => {
  await this.props.resetFilter();
  await this.props.resetClient();
  await this.props.resetUser();
};

或者如果你想让那些异步函数交错 Promise.all:

reset = async () => {
  await Promise.all([
    this.props.resetFilter(),
    this.props.resetClient(),
    this.props.resetUser()
  ])
};

如果您不像第一个示例那样等待 Promises:

reset = () => {
  this.props.resetFilter();
  this.props.resetClient();
  this.props.resetUser();
};

那么这三个调用的 promise 链就被破坏了，一开始这看起来可能不是问题，特别是如果你假设它们总是 resolve 的话。但如果其中一个 promise 被拒绝，可能会导致未处理的拒绝。