javascript - 在 Vue.js Mounted() 中更新数据不起作用

Question

我尝试在我的 Vue.js 组件中更新已安装部分中的一些数据。这是我的代码:

  methods: {
    initData() {
      const self = this;

      axios
        .get("/checkAuthentification")
        .then((response) => {
          (self.userFields.userAuthenticated = response.data),
            console.log("method"),
            console.log(self.userFields.userAuthenticated),
            console.log("reponse"),
            console.log(response.data);
        })
        .catch((error) => {
          (self.errors = error.response.data.errors || {}),
            console.log(self.errors);
        });

      console.log("between");

      console.log(self.userFields.userAuthenticated);

      if (self.userFields.userAuthenticated == "true") {
        axios
          .get("/getAuthenticatedUserData")
          .then((response) => {
            (self.userId = String(response.data.id)),
              (self.userFields = response.data),
              console.log("user data"),
              console.log(response.data);
          })
          .catch((error) => {
            (self.errors = error.response.data.errors || {}),
              console.log(self.errors);
          });
      }
    },
  },
  mounted() {
    this.initData();
  },

在第一次 axios 调用中，它运行良好，两个控制台日志给出了预期值“true”。但是在两者之间的下一个console.log上，它显示“未定义”。在第一次 axios 调用之后，用户字段不会更新。我不明白，因为我在表单上的提交按钮上做了同样的事情，而且效果很好。
我在这里问是因为我查看了其他帖子，答案总是使用 const=this，我这样做了。
谢谢您的帮助 !

Answer 1

要首先回答您的问题，您必须了解 Javascript 中异步操作的本质。我会尽力解释但会留下这个link如果您想了解更多信息
在您的示例中，您有:

axios.get('/checkAuthentification').then(response =>{
  console.log('CHecked authentication')
  ...
})

console.log('between');

console.log(self.userFields.userAuthenticated);

当您执行 axios.get发生的情况是将调用异步操作(异步 = 不会等待代码继续执行的答案)。只有当您收到 console.log('checked authentication') 的答复时，您才会联系您的后端服务器。将运行，但与此同时(记住 axios.get 是异步的) console.log('between'); AND console.log(self.userFields.userAuthenticated);将在您从后端服务器收到答案之前执行。
我们如何解决这个问题
我们可以用两种方法解决这个问题。第一个将是更旧的方法 - 等待 then 解决的 promise 关键词

axios
  .get('/checkAuthentification')
  .then(response =>{
    console.log('CHecked authentication')
  
    console.log('between');

    console.log(self.userFields.userAuthenticated);
    
    return response;
  })
  .then(() => {
    // do more operations after promise was resolved
  })

或者我们可以采用更现代的方式——我们可以使用 async/await。

async initData() {
  const response = await axios.get('/checkAuthentification');

  console.log('CHecked authentication')
  
  console.log('between');

  console.log(self.userFields.userAuthenticated);
}