Vue.js调用loadUserId()后data中userId字段未初始化问题

核心原因是axios发起的网络请求是异步非阻塞的，你当前的代码没有等待loadUserId()中的请求完成、给this.userId赋值，就直接执行了后续取this.userId发第二个请求的逻辑，此时this.userId还是初始的空字符串，自然传参为空。
实际代码执行顺序如下：

• created钩子触发，调用loadComponentsOfUser()
• loadComponentsOfUser()内部调用loadUserId()，发起第一个获取用户ID的网络请求，该请求进入异步任务队列，不会阻塞后续同步代码执行
• 同步代码继续往下走，立刻发起第二个请求users/ + this.userId，此时第一个请求还没返回，this.userId仍为空值
• 等第一个请求拿到返回值、执行then回调给this.userId赋值时，第二个请求早就已经发出去了。

另外你代码里还有个语法错误：methods():是错误写法，正确写法是methods: { ... }，多写的括号和冒号会导致语法报错，记得一并修正。

方案1：使用async/await 等待异步请求执行完成 #

给两个异步方法加上async标记，调用loadUserId()时加await等待请求返回、赋值完成后，再执行第二个请求，参考代码：

data() {
  return { 
    userId: ''
  }
},

created() {
  this.loadComponentsOfUser()
},

methods: {
   async loadUserId() {
     try {
       const res = await axios.get('getUserId')
       this.userId = res.data
     } catch (err) {
       // 原有错误处理逻辑
     }
   },
   async loadComponentsOfUser() {
     // 等待用户ID加载、赋值完成
     await this.loadUserId()
     try {
       const res = await axios.get(`users/${this.userId}`)
       // 原有处理用户组件数据的逻辑
     } catch (err) {
       // 原有错误处理逻辑
     }
   }
}

方案2：在Promise的then回调中执行依赖请求 #

让loadUserId()返回axios请求实例，在其then回调里确认userId赋值完成后，再发起第二个请求，无需async/await也可实现：

data() {
  return { 
    userId: ''
  }
},

created() {
  this.loadComponentsOfUser()
},

methods: {
   loadUserId() {
     return axios.get('getUserId').then(res => {
       this.userId = res.data
     }).catch(() => {
       // 原有错误处理逻辑
     })
   },
   loadComponentsOfUser() {
     this.loadUserId().then(() => {
       // 此时userId已经完成赋值，再发第二个请求
       axios.get(`users/${this.userId}`).then(res => {
         // 原有处理用户组件数据的逻辑
       }).catch(() => {
         // 原有错误处理逻辑
       })
     })
   }
}

内容的提问来源于stack exchange，提问作者Lyubushkino Soglasie