Question

我试图制作一个漂亮的AJAX界面，松散地适应了Todd Motto的Atomic.JS（http://toddmotto.com/writing-a-standalone-ajax-xhr-javascript-micro-library/）。然而，我的适应性并不奏效。问题：当使用这样的功能时

ajax.post(url, data)
    .success(function(x) {
        console.log('success',x);
    })
    .error(function(x) {
        console.log('error',x);
    });

AJAX功能无法达到＆＃39;错误方法，而成功表现完美。当我只在它被调用时才编写错误函数，但它确实可以正常工作。例如。像这样：

ajax.post(url, data)
    .error(function(x) {
        console.log('error', x);
    });

这是我的AJAX方法

var ajax = (function() {

    var parse = function(req) {
        var result;
        try {
            result = JSON.parse(req.responseText);
        } catch (e) {
            result = req.responseText;
        }
        return [result, req];
    };

    var xhr = function(type, url, data) {
        var methods = {
            success: function() {},
            error: function() {}
        };
        var XHR = XMLHttpRequest || ActiveXObject;
        var request = new XHR('MSXML2.XMLHTTP.3.0');
        request.open(type, url, true);
        request.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
        request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        request.onreadystatechange = function() {
            if (request.readyState === 4) {
                if (request.status === 200) {
                    methods.success.apply(methods, parse(request));
                } else {
                    methods.error.apply(methods, parse(request));
                }
            }
        };
        request.send(data);
        return {
            success: function(callback) {
                methods.success = callback;
                return methods;
            },
            error: function(callback) {
                methods.error = callback;
                return methods;
            }
        };
    };

    return {
        get: function(url) {
            return xhr('GET', url);
        },
        post: function(url, data) {
            return xhr('POST', url, data);
        }
    };

})();

我看到Todd Motto使用的是Factory方法，我并不熟悉。请帮助我达到我的.error！

Answer 1

嗯，问题是当你执行success函数时，你只设置成功回调。空占位符函数会覆盖错误回调。因此，当您通过执行对象的error函数设置error回调时，您没有调用所需的函数，而是调用空函数。

试试这个：

var ajax = (function() {

    var parse = function(req) {
        var result;
        try {
            result = JSON.parse(req.responseText);
        } catch (e) {
            result = req.responseText;
        }
        return [result, req];
    };

    var xhr = function(type, url, data) {
        var methods = {
            success: function(callback) {
                this.success = callback;
                return this;
            },
            error: function(callback) {
                this.error = callback;
                return this;
            }
        };
        var XHR = XMLHttpRequest || ActiveXObject;
        var request = new XHR('MSXML2.XMLHTTP.3.0');
        request.open(type, url, true);
        request.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
        request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        request.onreadystatechange = function() {
            if (request.readyState === 4) {
                if (request.status === 200) {
                    methods.success.apply(methods, parse(request));
                } else {
                    methods.error.apply(methods, parse(request));
                }
            }
        };
        request.send(data);
        return methods;
    };

    return {
        get: function(url) {
            return xhr('GET', url);
        },
        post: function(url, data) {
            return xhr('POST', url, data);
        }
    };

})();

调用回调方法

1 个答案: