Javascript 另一个函数在jqueryajax请求结束之前运行，无视应用程序顺序

我希望在第一个函数中从api获取响应并将其放入对象字段，然后在第二个函数中记录它。 当我们调用init函数-initApp（）时，应用程序启动，它描述了相同的顺序：首先获取数据，然后记录数据

class App {
    constructor() {
        this.data;
    }

    // init app
    initApp() {
        this.getServerData();
        this.foo();           
    }

    // get data using ajax
    getServerData() {
        $.ajax({
                url: 'https://jsonplaceholder.typicode.com' + '/posts/1',
                method: 'GET',
                dataType: 'json',
            })
            .then(data => {
              //  putting data to object field
                this.data = data;
            })
            .catch(error => {
                console.log(error);
            });
    }

    // log it
    foo() {
        console.log('another function in action, api response:');
        console.log(this.data);
    }
}

const app = new App();
app.initApp();

但是字段

app.data

未定义，因为

foo（）

在

getData（）

结束之前运行。 将

setTimeot（）

添加到

initApp（）

这是正常的还是使用其他情况更好

问题是，在我真正的应用程序中，除了一个

foo（）

之外，还有另外5-7个函数。然后把它们都放进

。然后
？
也许还有其他解决办法

非常感谢您的帮助。
您需要在此处使用callback

// init app

var self=this;
initApp() {
    this.getServerData(function(){ self.foo();  });

}

// get data using ajax
getServerData(callback) {
    $.ajax({
            url: 'https://jsonplaceholder.typicode.com' + '/posts/1',
            method: 'GET',
            dataType: 'json',
        })
        .then(data => {
          //  putting data to object field
            this.data = data;
            callback()  ;          
        })
        .catch(error => {
            console.log(error);
        });
}

从ajax调用的响应中调用foo（），这将确保foo仅在ajax调用后执行。
从
调用
foo
不是更简单吗？最简单的方法是使用回调。请检查我下面的答案。如果您面临任何问题或希望优化任何其他内容，请告诉我。编辑说明。当然，如果有1个foo（），但如果有5-10个？
这个
将是
jqxhr
在
中。然后（）
在
getServerData
中？@guest271314不，
这个
仍然是App的实例，在
中。然后（）
但是如果我们将添加foo2（）foo3（）foo4（），那么最好的情况是什么呢？在这种情况下，所有应用程序逻辑都将包含在
中。然后
，对吗？不。它将添加到initApp（）中。检查我在那里调用了self.foo（）。所以它可以是self.foo（）；self、foo2（）等。。。
// init app

var self=this;
initApp() {
    this.getServerData(function(){ self.foo();  });

}

// get data using ajax
getServerData(callback) {
    $.ajax({
            url: 'https://jsonplaceholder.typicode.com' + '/posts/1',
            method: 'GET',
            dataType: 'json',
        })
        .then(data => {
          //  putting data to object field
            this.data = data;
            callback()  ;          
        })
        .catch(error => {
            console.log(error);
        });
}