Javascript 当使用wait时，它是否会阻止使用它的函数？

我有以下

async

功能：

async LoadEditForm() {
    const { default : EditHero } = await import('./EditHero');
    this.setState({ lazyEditHero: EditHero })
}

这里称之为：

handleEnableAddMode = async () => {
    await this.LoadEditForm();
    this.setState({
        addingHero: true,
        selectedHero: { id: '', name: '', saying: '' }
    });
}  

关于上述代码，我有一个问题：

在这一行：

等待this.LoadEditForm（）

在

handleenabledmode

函数中，它是否会阻止该函数？换句话说，

this.setState（…）

函数是立即被调用，还是等待

wait

调用完成。

• 因为我听到人们说

  async/await

  的概念是允许您以同步方式编写异步代码。这让我有点困惑。有人能澄清一下吗

---

通常，

wait

将一直保持，直到它收到成功的结果，因为承诺被“解决”，或者它遇到错误，因为承诺被“拒绝”

---

如果这两个事件均未发生，则您的承诺将被打破，

等待

可能永远不会完成。

通常情况下，

等待

将一直保持，直到收到成功的结果，因为承诺已“解决”，或者因为承诺被“拒绝”而遇到错误

---

如果这两个事件都没有发生，您的承诺将被打破，

等待

可能永远不会完成。

当您调用Asyc函数时，它将返回一个承诺，无论何时您在异步函数中返回一个值，您的承诺都将得到解决，如果您抛出异常，您的承诺将被拒绝。另一方面，

await

表达式暂停异步函数的执行并等待传递的承诺的解析，然后恢复异步函数的执行并返回解析的值

根据Mozile文档中提供的样本：

function getProcessedData(url) {
  return downloadData(url) // returns a promise
    .catch(e => {
      return downloadFallbackData(url)  // returns a promise
    })
    .then(v => {
      return processDataInWorker(v); // returns a promise
    });
}


async function getProcessedData(url) {
  let v;
  try {
    v = await downloadData(url); 
  } catch(e) {
    v = await downloadFallbackData(url);
  }
  return processDataInWorker(v);
}

在您的情况下，只有在

等待this.LoadEditForm（）之后，才会执行setState必须满足。但问题是你没有抓住你的承诺可能被拒绝的可能性。因此，如果函数b被拒绝，您的设置状态将被执行

因此，您必须将wait函数和以下行包装在
try中。。。catch
语句
 当您调用Asyc函数时，它将返回一个承诺，无论何时您在异步函数中返回一个值，您的承诺都将得到解决，如果您抛出异常，您的承诺将被拒绝。另一方面，
await
表达式暂停异步函数的执行并等待传递的承诺的解析，然后恢复异步函数的执行并返回解析的值

根据Mozile文档中提供的样本：

function getProcessedData(url) {
  return downloadData(url) // returns a promise
    .catch(e => {
      return downloadFallbackData(url)  // returns a promise
    })
    .then(v => {
      return processDataInWorker(v); // returns a promise
    });
}


async function getProcessedData(url) {
  let v;
  try {
    v = await downloadData(url); 
  } catch(e) {
    v = await downloadFallbackData(url);
  }
  return processDataInWorker(v);
}

在您的情况下，只有在
等待this.LoadEditForm（）之后，才会执行setState必须满足。但问题是你没有抓住你的承诺可能被拒绝的可能性。因此，如果函数b被拒绝，您的设置状态将被执行

因此，您必须将wait函数和以下行包装在
try中。。。catch
语句

在这一行：等待这个；在HandleEnabledMode函数中，它是否阻止该函数？换句话说，this.setState（…）函数是立即被调用，还是等待wait调用完成

换句话说，其中一个不是另一个

它不阻塞，它等待。控件将返回给异步函数的调用方。当等待的承诺被解决或拒绝时，等待功能将恢复

有一个简单的例子，因此：

function resolveAfterHalfSecond() { 
  return new Promise(resolve => {
    setTimeout(() => {
      resolve();
    }, 500);
  });
}

async function f1() {
  $("div").append("<p>before await</p>");
  await resolveAfterHalfSecond();
  $("div").append("<p>after await</p>");
}

function test()
{
  $("div").append("<p>before call async function</p>");
  f1();
  $("div").append("<p>after call async function</p>");
}

$(test);

函数resolveAfterHalfSecond（）{
返回新承诺（解决=>{
设置超时（（）=>{
解决（）；
}, 500);
});
}
异步函数f1（）{
$（“div”）。在wait之前加上（）；
在半秒后等待解析（）；
$（“div”）。在wait之后追加（）；
}
功能测试（）
{
$（“div”）.append（在调用异步函数之前）
”；
f1（）；
$（“div”）.append（在调用异步函数之后）；
}
美元（测试）；

立即输出如下所示：

在调用异步函数之前

等待之前

调用后异步函数

半秒钟后，看起来

在调用异步函数之前

等待之前

调用后异步函数

等待之后

当在
f1（）
中点击
wait
时，它没有阻塞，而是立即返回到
test（）
并完成该功能。解决承诺后，
f1（）
继续

在这一行：等待这个；在HandleEnabledMode函数中，它是否阻止该函数？换句话说，this.setState（…）函数是立即被调用，还是等待wait调用完成

换句话说，其中一个不是另一个

它不阻塞，它等待。控件将返回给异步函数的调用方。当等待的承诺被解决或拒绝时，等待功能将恢复

有一个简单的例子，因此：

function resolveAfterHalfSecond() { 
  return new Promise(resolve => {
    setTimeout(() => {
      resolve();
    }, 500);
  });
}

async function f1() {
  $("div").append("<p>before await</p>");
  await resolveAfterHalfSecond();
  $("div").append("<p>after await</p>");
}

function test()
{
  $("div").append("<p>before call async function</p>");
  f1();
  $("div").append("<p>after call async function</p>");
}

$(test);

函数resolveAfterHalfSecond（）{
返回新承诺（解决=>{
设置超时（（）=>{
解决（）；
}, 500);
});
}
异步函数f1（）{
$（“div”）。在wait之前加上（）；
在半秒后等待解析（）；
$（“div”）。在wait之后追加（）；
}
功能测试（）
{
$（“div”）.append（在调用异步函数之前）
”；
f1（）；
$（“div”）.append（在调用异步函数之后）；
}
美元（测试）；

立即输出如下所示：

在调用异步函数之前

等待之前

调用后异步函数

半秒钟后，看起来

在调用异步函数之前

等待之前

调用后异步函数

等待之后

当在
f1（）
中点击
wait
时，它没有阻塞，而是立即返回到
test（）
并完成该功能。承诺解决后，
f1（）
继续。
为什么要使用wait？N