Vue中如何正确将API异步请求数据赋值到data方法

• 异步传递链路断裂：当前getData方法没有将内部的请求Promise作为返回值，方法调用后没有任何同步返回内容，this.name = this.getData()实际拿到的是undefined，自然渲染不出内容。因为请求是异步执行的，哪怕后续请求成功拿到数据，这个赋值动作也不会再次触发——这也是你写死返回值时页面能正常渲染、走请求就失效的核心原因。
• this指向丢失：你写的then回调使用了普通函数声明，这类函数的执行上下文不会自动继承外层组件的this，在回调内部执行时，this根本不是当前Vue组件实例，才会触发Cannot set property 'name' of undefined的报错。
• 回调逻辑不完整：原代码的then块只写了r.data空表达式，没有实际执行赋值动作，哪怕请求成功，name也会一直保留初始的空字符串。

• 不要试图用同步逻辑接异步请求的返回值，直接在请求成功的回调内给data里的响应式变量赋值即可，Vue的响应式系统会在数据更新后自动触发视图重渲染。
• 调整then回调的写法，用箭头函数替代普通函数，箭头函数没有自身的this上下文，会直接复用外层方法所属的组件实例this，不会出现指向丢失的问题。
• 如果后续需要在请求完成后做其他联动逻辑，直接在then的链路内编写对应代码即可。

修正后的完整可运行代码示例：

data() {
  return {
    name: ""
  }
},
methods: {    
  getData() {
    // return Promise主要是为了方便后续链式调用编写其他逻辑
    return useData.data("profile", this.route.params.id).then((r) => {          
      // 直接给data中的name赋值，此时的this已经正确指向组件实例
      this.name = r.data
    });
  }
},
created() {
  // 仅需触发请求即可，不需要同步接返回值赋值给name
  this.getData()
}

注意：如果使用HTTP请求库时遇到取值不匹配的情况，先打印完整的响应结构，确认业务数据所在的嵌套层级，避免出现取值路径错误。

内容的提问来源于stack exchange，提问作者Thiago Guimarães