我猜执行顺序有问题

Question

我失去理智了！我尝试从表单获取数据并将其传递给 php 脚本，该脚本将数据放入 csv 文件和数据库中。这是可行的，但是我正在尝试使用 Javascript 验证数据传输以及从 php 脚本获得的响应。当 php 脚本将文件正确添加到数据库时，它会向传输的数据添加一个键：值对，我想检查并确定数据是否已放入数据库中。但是，当我执行脚本时，我从 php 脚本获取的响应之后添加的对象值，以检查它们是否相同，始终会在开始时填充。

PHP 端：

$Submitted_data = json_decode(file_get_contents('php://input'), true); //saving the Post Request

//process data

if ($conn->query($sql) === TRUE) {
    $Submitted_data["sqlTX"] = "New record created successfully";
    echo json_encode($Submitted_data);
} else {
  echo "Error: " . $sql . "<br>" . $conn->error;
}

成功后，我添加键“sqlTX”和值“成功创建新记录”，因为我不直接从表单调用 .php 文件，我使用 javascript fetch 调用它，以防止加载 php 网站，并且用户停留在他们的网站上是。因此，我尝试通过将添加 key:value 的传输对象与我用来发送到 phph 脚本的 formattedFormData 对象进行比较来验证放入数据库的数据。因为我现在希望获得什么键：值，所以我将其添加到我使用 fetch 传输数据后用于传递到脚本中的对象中，但是当我将对象记录到控制台时，它总是在第一次我检查它填充了

function txData() {

  const form = document.getElementById('dataInput');
  const time = new Date().toLocaleDateString('en-EN') + " - " + new Date().toLocaleTimeString('en-EN');
  const formattedFormData = {} //resetting object since i was thinking thats the issue

     
  formattedFormData.Name = form.Name.value;
  formattedFormData.Attend = form.Attend.value;
  formattedFormData.Participants = form.Participants.value;
  formattedFormData.Contact = form.Contact.value;
  formattedFormData.Message = form.Message.value;
  formattedFormData.Timestamp = time;
    
    console.log("initial formattedFormData");
    console.log(formattedFormData);

  return fetch('submitAttendance.php',
    {
        method: 'POST',
        body: JSON.stringify(formattedFormData)
        
    })
    .then(function(response) {
      return response.json();
    })
    .then(function(data) {
      console.log("data");
      console.log(data);

      console.log("before adding key:value");
      console.log(formattedFormData);

      formattedFormData.sqlTX = "New record created successfully!!!!!!"; //Adding !!!!! to be able to see the difference in the console log and get a return false for further error handling

      console.log("after adding key:value");
      console.log(formattedFormData);
      
      if(data == formattedFormData){
        console.log("postdata true");
        return true;
      }
      else {
        console.log("postdata false");
        return false;
      }

    })
}

为什么在初始化后第一个console.log("initial formattedFormData")上出现formattedFormData，并填充了键：值“sqlTX”：“新记录创建成功！！！！！！”即使我使用 then() 来等待获取完成？这样，即使传输或数据库输入失败，脚本也会显示成功运行？我确信有些东西我不理解或从这个概念中得到了错误......

在普通函数中具有此功能，将其更改为 async/await，现在使用 then() 进行 Promise，因为我认为问题与执行顺序有关。阅读了有关调用堆栈的信息并尝试进行大量调试以找出为什么变量在初始化后立即获取 key:value 但无法得到答案

Answer 1

我的假设是你的问题是你只是在添加属性后查看对象。

开发工具使用延迟扩展，因此只有在单击

>

箭头时，它才会加载对象中的所有属性进行显示。 （如果不是这样，想象一下如果您记录窗口会发生什么...如果必须复制整个环境，您的 RAM 使用量每次都会增加 100MB。）

尝试直接记录

JSON.stringify(formattedFormData)

或

formattedFormData.sqlTX

，以便立即加载并记录字段，而不是稍后当您单击箭头时。您还可以使用调试器直接在

console.log

之后设置断点，以便您可以在其余代码运行之前单击箭头。

---

要理解我的意思，请尝试以下操作：

const x = { a: 1 }
console.log(x)
x.a = 2
console.log(x)

您最初会看到

{ a: 1 }

和

{ a: 2 }

，因为单行预览 is 会立即评估，但如果您随后单击

{ a: 1 }

旁边的箭头，您将看到对象随着

a: 2

展开，因为那是单击箭头时它所具有的值！