Javascript 如何在主干网中编写http侦听器

因为我已经在主干上工作了，现在我正在学习。我真的很喜欢棱角分明的造型。我正在考虑如何在主干中实现HTTP拦截器，以便在JavaScript使用AJAX向后端保存或从后端获取数据时显示spinner和toaster。最终我找到了一种方法。我想分享一下。希望它能帮助你们所有人。

我假设你们使用的是requireJS，而不仅仅是将AMD转换为iLife

define("vent", ["backbone", "backbone.marionette"], function(backbone) {
    return new backbone.Wreqr.EventAggregator
});
define("backbone-sync", ["backbone", "underscore", "vent"], function(backbone, underscore, vent) {
    var xhrArray = [];
    var abortAllPendingXhrs = function() {
        underscore.invoke(xhrArray, "abort"),
        xhrArray = []
    };
    // here options can contain the text which you want to show on spinner and toaster
    var showSpinnerandToaster = function(method, options) {
        if("create" === method || "update" === method || "patch" === method) {
            //show saving spinner
        }
        if("read" === method) {
            //show fetching spinner
        }
        //using once here because none of this will be called twice
        //'sync' event is fired on the model/collection when ajax gets succeeded
        this.once("sync", function() {
            //hide the spinner and show success toaster
            //remove cancelRequest since now on you can not abort the AJAX
            delete this.cancelRequest;
            //remove error callback since it will not be called now
            this.off("error");
        });
        //'error' event is fired on the model/collection when ajax fails
        this.once("error", function(model, xhr) {
            //show error toaster if the xhr.statusText !== "abort"
            //remove cancelRequest since now on you can not abort the AJAX
            delete this.cancelRequest;
            //remove sync callback since it will not be called now
            this.off("sync");
        });
    };
    vent.on("abortAllPendingXhrs", abortAllPendingXhrs);
    backbone.Model.prototype.sync = backbone.Collection.prototype.sync = function(method, model, options) {
        var proxiedShowSpinnerandToaster = underscore.bind(showSpinnerandToaster, this);
        proxiedShowSpinnerandToaster(method, options)
        var xhr = backbone.sync.apply(this, arguments);
        xhrArray.push(xhr);
        xhrArray = underscore.reject(xhrArray, function(xhr) {
            //remove all xhrs which are completed since we can not abort them
            return 4 === xhr.readyState
        }),
        this.cancelRequest = function(){
            //invoke cancelRequest on model if you want to abort the AJAX call
            xhr.abort();
        }
        return xhr;
    }
});

---

我假设您使用的是requireJS，如果不只是将AMD转换为IIFE的话

define("vent", ["backbone", "backbone.marionette"], function(backbone) {
    return new backbone.Wreqr.EventAggregator
});
define("backbone-sync", ["backbone", "underscore", "vent"], function(backbone, underscore, vent) {
    var xhrArray = [];
    var abortAllPendingXhrs = function() {
        underscore.invoke(xhrArray, "abort"),
        xhrArray = []
    };
    // here options can contain the text which you want to show on spinner and toaster
    var showSpinnerandToaster = function(method, options) {
        if("create" === method || "update" === method || "patch" === method) {
            //show saving spinner
        }
        if("read" === method) {
            //show fetching spinner
        }
        //using once here because none of this will be called twice
        //'sync' event is fired on the model/collection when ajax gets succeeded
        this.once("sync", function() {
            //hide the spinner and show success toaster
            //remove cancelRequest since now on you can not abort the AJAX
            delete this.cancelRequest;
            //remove error callback since it will not be called now
            this.off("error");
        });
        //'error' event is fired on the model/collection when ajax fails
        this.once("error", function(model, xhr) {
            //show error toaster if the xhr.statusText !== "abort"
            //remove cancelRequest since now on you can not abort the AJAX
            delete this.cancelRequest;
            //remove sync callback since it will not be called now
            this.off("sync");
        });
    };
    vent.on("abortAllPendingXhrs", abortAllPendingXhrs);
    backbone.Model.prototype.sync = backbone.Collection.prototype.sync = function(method, model, options) {
        var proxiedShowSpinnerandToaster = underscore.bind(showSpinnerandToaster, this);
        proxiedShowSpinnerandToaster(method, options)
        var xhr = backbone.sync.apply(this, arguments);
        xhrArray.push(xhr);
        xhrArray = underscore.reject(xhrArray, function(xhr) {
            //remove all xhrs which are completed since we can not abort them
            return 4 === xhr.readyState
        }),
        this.cancelRequest = function(){
            //invoke cancelRequest on model if you want to abort the AJAX call
            xhr.abort();
        }
        return xhr;
    }
});

---

嗨，Nikhil，除了在这里发布这个，我想在这里更新BackboneJS的SO文档会很好-@DavidR我当然会这样做。谢谢Nikhil！：-）嗨，Nikhil，除了在这里发布这个，我想在这里更新BackboneJS的SO文档会很好-@DavidR我当然会这样做。谢谢Nikhil！：-）