如何将Vue方法中Ajax获取的myEnrollments数据赋值到Vue model用作链接变量

• 异步时序错位：mounted内同步调用两个AJAX方法时，由于AJAX是异步非阻塞的，getMyUrl发起请求时，getMyEnrollments的接口还未返回结果，此时读取到的myEnrollments仍是data中初始定义的空值，相当于拼接URL时参数为空。
• 响应式规则不符合Vue2的设计要求：代码中直接给vm实例挂载的FirstName、ProfileIdentifier、Identifier未在data的初始结构中预先声明，这类动态新增的实例属性不具备响应式追踪能力，后续在模板或其他方法中读取时无法触发更新。
• 冗余的取值路径：原代码拼接URL时使用this.$root.$data.myEnrollments取值，在当前无嵌套子组件的单实例场景下，直接通过this.myEnrollments即可读取响应式变量，过度绕层的取值方式在组件嵌套场景下极易出现取值错位。

1. 调整异步执行链路，保证获取myEnrollments的接口完成数据赋值后，再发起依赖该参数的getMyUrl请求，避免参数为空的问题。
2. 将所有需要跨方法、模板使用的变量全部在data初始结构中预先声明，匹配Vue2的响应式追踪规则。
3. 为getMyEnrollments方法返回Promise对象，通过async/await控制异步流程，避免回调嵌套带来的时序混乱。

new Vue({
  el: "#app",
  data: {
    myEnrollments: '',
    myScore: '',
    // 预先声明所有需要响应式追踪的属性
    FirstName: '',
    ProfileIdentifier: '',
    Identifier: ''
  },
  // 用async标记mounted钩子，支持await异步等待
  async mounted() {
    // 等getMyEnrollments完成数据赋值后，再执行getMyUrl
    await this.getMyEnrollments();
    this.getMyUrl();
  },
  methods: {
    getMyEnrollments: function() {
      // 把AJAX请求封装为Promise返回
      return new Promise((resolve) => {
        $.ajax({
          url: "https://www.example.com/users/myinfo",
          type: 'Get',
          headers: {
            accept: "application/json;odata=verbose"
          },
          success: function(data) {
            // 直接通过当前实例赋值data中预先声明的属性
            this.FirstName = data.FirstName;
            this.ProfileIdentifier = data.ProfileIdentifier;
            this.Identifier = data.Identifier;
            this.myEnrollments = data.myEnrollments;
            // 数据赋值完成后标记流程结束
            resolve();
          }.bind(this)
        })
      })
    },
    getMyUrl: function() {
      $.ajax({
        // 此时myEnrollments已经是接口返回的最新值
        url: "https://www.example.com/users/myURL/" + this.myEnrollments + "/orgUnits",
        type: 'Get',
        headers: {
          accept: "application/json;odata=verbose"
        },
        success: function(data) {
          console.log(data);
        }
      })
    }
  }
})

注意：如果需要保留jQuery AJAX的回调写法，也可以在getMyEnrollments的success回调里直接调用getMyUrl，保证数据赋值完成后再触发后续请求，本质上都是解决异步时序的问题。

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