javascript - 在 javascript 中使用 promises - 只访问服务器一次

Question

我试图完全理解 promise 的用法及其带来的好处。我有一个 AJAX 调用，可以从服务器获取大量数据。现在我没有实现 promise ，代码会在用户更改 View 时访问服务器(所有这些都使用相同的数据，只是它看起来的样子)。

这是我要添加的 promise :

function feedData(arr){
     //data being initialized
    this.initData();
}

feedData.prototype = {
    constructor: feedData,
    getData:function(){
        return $.ajax({
           url: 'php/getData.php',
           dataType: 'json',
           data: {
                //data being sent over
           }
        });
    },
    initData:function(){
        this.getData()
        .done(function(result){
            console.log(result.length);
        })
        .fail(function(x){
            console.log(x);
        });
    },
    ....
}

我可能没有完全理解这里的异步行为。我想要做的是从 getData 获取结果并填充一个充满数据的对象，每当用户更改 View 时都会调用该对象。从我读过的所有内容来看，这不是 promise 的用途。相反，我应该返回一个 promise 并再次使用该数据吗？ (也许这是我的思路错误)

所以我的问题是，一旦从 AJAX 返回来自 getData 的数据，有没有办法返回 promise 并多次使用 .done 而无需点击服务器曾经？意思是，由于我将使用相同的数据并且无法将其保存到全局对象中，我该如何实现呢？

Answer 1

跟踪 $.ajax() 返回的 promise 。无论您调用 getData() 的频率如何，这只会调用一次(在构造函数中):

function FeedData() {
    this.data_promise = $.ajax({
        url: 'php/getData.php',
        dataType: 'json',
        data: {}
    });
}

FeedData.prototype = {
    constructor: FeedData,
    getData: function () {
        return this.data_promise;
    }
}

var feed = new FeedData();
feed.getData().then(function () {
    /* .. */
});

您也可以延迟获取，直到您第一次调用 getData():

function FeedData() {
    this.data_promise = null;
}

FeedData.prototype = {
    constructor: FeedData,
    getData: function () {
        if (this.data_promise === null) {
            this.data_promise = $.ajax({
                url: 'php/getData.php',
                dataType: 'json',
                data: {}
            });
        }
        return this.data_promise;
    }
}