Javascript 为什么代码行不是'；t在等待服务器响应后执行

在react组件中，我有以下代码：

updateProject（）是对服务器的POST请求，setIsProjectModalVisible是来自父组件的setState函数，该函数作为prop传递

我有一个奇怪的行为：在前面的代码中，模态不会被隐藏（setIsProjetModalVisible（false）不会运行），但是如果我交换了两行：

它将按预期工作，模态将变得不可见

经过一点研究，我发现了问题：服务器没有响应updateProject（）。解决这个问题后，第二行代码现在将产生预期的行为

---

即使问题已经解决，我还是想了解这种行为：由于服务器没有响应，我可能会在等待行中等待无限时间，但在调试时，它只会跳过该行，并且不会显示错误。为什么呢？谢谢

调用

updateProject

时，它返回一个挂起的承诺。起初，挂起的承诺不会阻止下面的下一个代码

setIsProjectModalVisible（false）

但是，当您将函数声明为

async

，并将

wait

标记为您的承诺时，您是在声明以下代码只应在您的承诺解决时执行。如果承诺挂起，您的代码将被阻止，直到承诺解决

承诺还可以拒绝（您会遇到服务器超时错误或其他错误），这会抛出错误，但您的代码不会执行。你的应用程序会崩溃，除非你将你的承诺包装在一个try/catch块中（这是推荐的），在这个块中你可以正确地处理catch块上的错误

const handleButton = async () => {
  try {
    const resp = await updateProject(projectInfo);
    // if it rejects following code doesn't execute. jumps to catch block
    setIsProjectModalVisible(false)
  } catch (error) {
    // handle error here
    console.log(error)
  }
};

---

根据您的

updateProject

的编写方式，当其中的POST请求以某种方式失败时，它可能无法解决（即您没有捕获错误），因此您的

const resp=wait updateProject（projectInfo）实际上从未得到任何回报。当然，这会导致无法访问此部分
setIsProjectModalVisible（false）
。因此，你的模态不会消失

这应该可以解释这种行为。至于修复它，那么，只需捕获错误并仍然解决函数。因此，类似这样的方法会起作用：

const updateProject = (project_data) => {
   return axios.post('url', project_data)
    .catch(e => {
       console.log(e);
       return "Error occurred";
    })
}


这样，即使您的post请求爆炸，您的WAIT仍会返回一些内容，并且不会阻止代码继续执行。
我认为从您的代码片段中最好有一个try-catch，因此如果post抛出错误，您可以在catch上登录，我认为发生了错误，但从代码片段中没有发现错误。关闭服务器，尝试运行
updateProject（projectInfo）。然后（未定义，（原因）=>console.log（原因））请不要等待并发布结果。您需要检查承诺是否已成功履行或未履行。因此，严格来说，这可能不是一个错误，只是您的承诺没有实现/挂起，代码被冻结。我认为catch可以很好地捕获实际错误，但对于这个特殊的异步问题没有帮助
const handleButton = async () => {
  try {
    const resp = await updateProject(projectInfo);
    // if it rejects following code doesn't execute. jumps to catch block
    setIsProjectModalVisible(false)
  } catch (error) {
    // handle error here
    console.log(error)
  }
};

const updateProject = (project_data) => {
   return axios.post('url', project_data)
    .catch(e => {
       console.log(e);
       return "Error occurred";
    })
}