Javascript 更新Vue.js Mounted（）中的数据不'；行不通

我尝试更新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”。但是在between之后的下一个console.log上，它会显示“undefined”。Thue用户字段在第一次axios调用后不会更新。我不明白，因为我在表单的提交按钮上做了同样的事情，它工作得非常好。 我这样问是因为我看了其他帖子，答案总是使用const=this，我就是这么做的。

---

谢谢你的帮助

要首先回答您的问题，您必须了解Javascript中异步操作的本质。我会尽我最大的努力解释，但如果你想了解更多，我会留下这个

就你的例子而言，你有：

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

console.log('between');

console.log(self.userFields.userAuthenticated);

执行

axios.get

时，将调用异步操作（asynchornous=不会等待代码继续执行的答案）。您将联系后端服务器，只有在收到答复时，

console.log（'checked authentication'）

才会运行，但同时（请记住

axios.get

是异步的）

console.log（'between'）；和console.log（self.userFields.userAuthenticated）将在您从后端服务器收到答复之前执行

我们如何解决这个问题
我们可以用两种方法来解决这个问题。第一种是更老的方法——等待承诺通过
然后
关键字来解决

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);
}

状态：{
用户字段：{
userAuthenticated:false，
...
}
},
方法：{
initData（）{
const self=这个；
axios
.get（“/checkauthentication”）
。然后（（响应）=>{
（self.userFields.userAuthenticated=response.data），
console.log（“方法”），
console.log（self.userFields.userAuthenticated），
控制台日志（“响应”），
console.log（response.data）；
})
.catch（（错误）=>{
（self.errors=error.response.data.errors |{}），
console.log（self.errors）；
});
},
getUserData（）{
if（this.userFields.userAuthenticated）{
axios
.get（“/getAuthenticatedUserData”）
。然后（（响应）=>{
（self.userId=String（response.data.id）），
（self.userFields=response.data），
console.log（“用户数据”），
console.log（response.data）；
})
.catch（（错误）=>{
（self.errors=error.response.data.errors |{}），
console.log（self.errors）；
});
}
}
},
观察：{
“userFields.userAuthenticated”：函数（）{
这个文件名为getUserData（）
}
},
安装的（）{
这是initData（）；
},
您是否尝试或检查了async/await？我认为您需要等到第一个axios进程完成，因为它是异步函数。请在代码中添加解释以便更好地理解。好的，非常感谢！我工作过。我肯定会花时间阅读更多关于异步操作的内容；因为我会在axios上做很多工作，所以它会很有用。如果我理解得很好，如果我将每个axios调用在方法中的专用函数中分离，然后逐个调用它们，这会有效吗？函数是否正确等待？如果没有示例，很难告诉您。请随时更新问题以包含示例，然后我可以帮助您。@pierrects如果此答案回答了您的问题，请将其标记为正确