Vue+Vuex场景下jQuery Ajax回调类方法调用错误实例问题

看起来你碰到的是JavaScript异步操作里的作用域绑定坑，这种情况在连续触发Ajax请求时特别容易出现，尤其是回调函数的this指向没处理好的时候，很容易把不同实例的回调搞混。

问题根源分析 #

先帮你捋捋最可能的原因：
当你通过ID请求ApiObject时，如果你的类方法里的Ajax回调是普通函数，jQuery会默认把回调的this绑定到Ajax请求对象上，而不是你的ApiObject实例。如果短时间内触发两个请求，后续的回调可能会覆盖之前的作用域引用，就会出现你看到的“调用错误实例”的情况。

举个典型的错误代码例子：

class ApiObject {
  constructor(id) {
    this.id = id;
  }

  fetch() {
    $.ajax({
      url: `/api/objects/${this.id}`,
      success: function(data) {
        // 这里的this根本不是当前ApiObject实例！
        this.update(data);
      }
    });
  }

  update(data) {
    // 更新实例数据
  }
}

另外，如果你的代码是在循环里创建实例并触发请求，闭包会捕获循环变量的引用而非当前迭代的值，也会导致所有回调都指向最后一个实例。

针对性解决方案 #

1. 用箭头函数绑定正确的this

箭头函数会继承外层作用域的this，能确保回调里的this就是当前ApiObject实例：

fetch() {
  $.ajax({
    url: `/api/objects/${this.id}`,
    success: (data) => {
      this.update(data);
    }
  });
}

2. 用$.proxy()强制绑定上下文

如果你的环境不支持箭头函数，用jQuery的$.proxy()把回调的this硬绑定到当前实例：

fetch() {
  $.ajax({
    url: `/api/objects/${this.id}`,
    success: $.proxy(function(data) {
      this.update(data);
    }, this)
  });
}

3. 提前保存实例引用

在异步操作前，把当前实例存到一个变量里（比如self），回调里直接用这个变量：

fetch() {
  const self = this;
  $.ajax({
    url: `/api/objects/${this.id}`,
    success: function(data) {
      self.update(data);
    }
  });
}

4. 确保Vuex中实例的唯一性

还要检查你的Vuex Store逻辑，保证添加实例时是按ID唯一存储的，避免实例被覆盖：

mutations: {
  ADD_API_OBJECT(state, payload) {
    // 用ID作为键，彻底避免重复或覆盖
    state.apiObjects[payload.id] = payload.object;
  }
}

额外优化建议 #

• 尽量把jQuery Ajax换成Vue生态推荐的axios，它的Promise风格更易处理异步，上下文绑定也更直观。
• 在触发请求前，先检查Vuex里是否已有该ID的实例，避免重复请求，比如在actions里：

actions: {
  async fetchApiObject({ state, commit }, id) {
    // 先查缓存，存在就直接返回
    if (state.apiObjects[id]) {
      return state.apiObjects[id];
    }
    const response = await axios.get(`/api/objects/${id}`);
    const apiObject = new ApiObject(id, response.data);
    commit('ADD_API_OBJECT', { id, object: apiObject });
    return apiObject;
  }
}

按上面的方法调整后，应该就能解决回调绑定错误实例的问题了。

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