Javascript 使用ES6类封装AJAX

我正在尝试封装AJAX加载程序

代码如下所示：

const $ = require('jquery');

class ModelLoader {
    static loadCsvFile(path, callback, options) {
        this.callback = callback;
        $.get(path, this._loadCsvFile);
    }

    static _loadCsvFile(data) {
        ModelLoader.callback(); // using this.callback() doesn't work because this here is AJAX object
    }
}

module.exports = ModelLoader;

ModelLoader.loadCsvFile('model1.csv', callback1);
ModelLoader.loadCsvFile('model2.csv', callback2);

class ModelLoader {
    loadCsvFile(path, callback, options) {
        $.get(path, (data) => {
            this._loadCsvFile(data, callback);
        });
    }

    _loadCsvFile(data, callback) {
        callback(); // using this.callback() doesn't work because this here is AJAX object
    }
}

问题在于，当用户编写这样的代码时：

const $ = require('jquery');

class ModelLoader {
    static loadCsvFile(path, callback, options) {
        this.callback = callback;
        $.get(path, this._loadCsvFile);
    }

    static _loadCsvFile(data) {
        ModelLoader.callback(); // using this.callback() doesn't work because this here is AJAX object
    }
}

module.exports = ModelLoader;

ModelLoader.loadCsvFile('model1.csv', callback1);
ModelLoader.loadCsvFile('model2.csv', callback2);

class ModelLoader {
    loadCsvFile(path, callback, options) {
        $.get(path, (data) => {
            this._loadCsvFile(data, callback);
        });
    }

    _loadCsvFile(data, callback) {
        callback(); // using this.callback() doesn't work because this here is AJAX object
    }
}

它们都将进入

callback2

，因为

this.callback

在调用第一个

\u loadCsvFile（data）

之前变为

callback2

---

有什么优雅的解决方案可以封装AJAX吗？

将回调保留在类中的原因是什么？ 在

\u loadCsvFile

中，我只需传递回调并在那里调用它，如下所示：

const $ = require('jquery');

class ModelLoader {
    static loadCsvFile(path, callback, options) {
        this.callback = callback;
        $.get(path, this._loadCsvFile);
    }

    static _loadCsvFile(data) {
        ModelLoader.callback(); // using this.callback() doesn't work because this here is AJAX object
    }
}

module.exports = ModelLoader;

ModelLoader.loadCsvFile('model1.csv', callback1);
ModelLoader.loadCsvFile('model2.csv', callback2);

class ModelLoader {
    loadCsvFile(path, callback, options) {
        $.get(path, (data) => {
            this._loadCsvFile(data, callback);
        });
    }

    _loadCsvFile(data, callback) {
        callback(); // using this.callback() doesn't work because this here is AJAX object
    }
}

---

请注意，我去掉了

loadCsvFile

中的

static

关键字，因为它不能是静态的（因为您正在该函数中调用

this

）

除了

ModelLoader.callback

之外，您在

\loadCsvFile.

中还做了什么吗？为什么不直接在

$中传递回调呢？获取（路径，回调）

并且不将其存储在任何地方？不要编写只包含静态成员的

类。如果您确实需要这样一个对象，请使用对象文字。我已经测试过了。如果这两个方法都是
静态的
，效果会很好。您的注释不准确，
这个。回调
如果存储在实例上，效果会很好，但这意味着类不是静态的，即，对于每个回调，您必须创建
ModelLoader
对象的新实例。