Question

我试图封装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);

在调用第一个callback2之前，this.callback变为callback2，因此它们都会进入_loadCsvFile(data)。

是否有任何优雅的解决方案来封装AJAX？

Answer 1

在课堂上保留回调的原因是什么？在_loadCsvFile中，我只是传递回调并在那里调用它，如下所示：

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
    }
}

请注意，我删除了static中的loadCsvFile关键字，因为它不能是静态的（因为您在该函数中调用了this）。

使用ES6类封装AJAX

1 个答案: