异步请求完成后如何在then函数中正确访问类成员数据？

嘿，你的问题其实是两个常见的异步陷阱导致的：Ajax回调里的this指向错了，还有Promise流程和类成员更新没同步好。咱们一步步拆解解决：

为什么myThenFunc里拿不到更新后的值？ #

你在$.ajax的success回调里写this.data1 = response的时候，这个this根本不是你的MyClass实例！普通function当回调时，this会变成Ajax请求的上下文（浏览器里就是全局window），等于你把response赋值给了一个无关的对象，myClass.data1还是初始的空数组，那then里自然拿不到正确值咯。

最简单的修复方案 #

直接用箭头函数绑定this，同时保证Promise等待请求完成后再触发then：

class MyClass{
 constructor(){
 this.data1 = []
 this.data2 = []
 // 箭头函数会自动继承外层的this（也就是MyClass实例）
 const p1 = $.ajax({
 type: "GET",
 url: "data1-api" // 注意这里要加引号，是字符串！
 }).done((response) => {
 console.log(response);
 this.data1 = response;
 });
 const p2 = $.ajax({
 type: "GET",
 url: "data2-api"
 }).done((response) => {
 console.log(response);
 this.data2 = response;
 });
 // Promise.all会等两个请求都完成，再触发后续的then
 this.apiPromises = Promise.all([p1,p2]);
 }
}

const myClass = new MyClass();
$(function() {
 myClass.apiPromises.then(function () { // 这就是你说的myThenFunc
 console.log("finish all");
 console.log(myClass.data1); // 现在能拿到正确的返回值啦！
 console.log(myClass.data2);
 })
})

更严谨的优化：让Promise直接管理数据 #

如果你想更清晰地控制流程，可以让Promise.all直接返回请求结果，再统一给类成员赋值，这样能避免异步顺序的问题：

class MyClass{
 constructor(){
 this.data1 = []
 this.data2 = []
 // 让每个Ajax Promise直接resolve返回的response
 const p1 = $.ajax({
 type: "GET",
 url: "data1-api"
 });
 const p2 = $.ajax({
 type: "GET",
 url: "data2-api"
 });
 // 先等两个请求完成，再给类成员赋值，确保赋值完成后才触发后续then
 this.apiPromises = Promise.all([p1,p2]).then(([res1, res2]) => {
 this.data1 = res1;
 this.data2 = res2;
 return [res1, res2]; // 可以把结果传递给后续的then
 });
 }
}

const myClass = new MyClass();
$(function() {
 myClass.apiPromises.then(([res1, res2]) => {
 console.log("finish all");
 console.log(myClass.data1); // 正确值
 console.log(res1); // 也可以直接用Promise返回的结果，更直观
 })
})

核心知识点提醒 #

• 箭头函数是绑定this的神器，在类的异步回调里用它，能避免90%的this指向问题（也可以用bind(this)，但箭头函数更简洁）。
• 你完全可以在myThenFunc里直接用myClass的引用——因为对象是引用类型，只要类成员被正确更新，then里就能拿到最新值，之前的问题只是没更新成功而已。

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