Question

我正在尝试使用ajax blockmanager插件来管理我的jquery ajax请求，但我不确定如何实现它...

 // Follow button click event
    $('#loginBtn').click(function () {
        var that = this;

        var request = {
            'username': $('#txtUsername').val(),
            'password': $('#txtPassword').val()
        };

        var params = $.toJSON(request);

        ajaxManager.add($.ajax({
            type: "POST",
            url: "ajax/Login.aspx/Login",
            data: params,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (result) {
                if (result.d === true) {
                    window.location = "dashboard.aspx";
                }
                else {
                    $('#errorMessage').slideDown();
                }
            }
        }));

Answer 1

我知道这是一个有点过时的问题......但如果有人遇到这个问题：

您正在将已创建/已启动的请求作为参数传递给经理。你应该只传递它的选择。该请求将由经理创建和处理。

    ajaxManager.add({
        type: "POST",
        url: "ajax/Login.aspx/Login",
        data: params,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (result) {
            if (result.d === true) {
                window.location = "dashboard.aspx";
            }
            else {
                $('#errorMessage').slideDown();
            }
        }
    });

Answer 2

您是否实例化了ajaxManager？

//create an ajaxmanager named cacheQueue
var ajaxManager = $.manageAjax.create('cacheQueue', {
    queue: true, 
    cacheResponse: true
});

Answer 3

首先创建经理

this.ajaxManager = $.manageAjax.create("aiapi", {
        queue: true,
        cacheResponse: true,
        maxRequests: 3,
        abort: this.abortCallback
    });

其中调用队列处于活动状态，最大并发请求数为3，并且启用了缓存。常见abortCallback就像

this.abortCallback = function (response) {
        Logger.log("APIManager.abortCallback " + Utils.toString(response));
    };

添加常见的ajaxSetup设置很方便

$.ajaxSetup({
        cache: true,
        timeout: 10 * 1000
    });

在这里，您可以看到msec中的响应超时设置为10秒。然后你做GET之类的

    this.DoGet = function (url, method, timeout) {
        return new Promise((resolve, reject) => {
            var options = {
                type: 'GET',
                url: url + method,
                contentType: "application/json",
                timeout: (15 * 1000) // sets timeout to 60 seconds
            };
            if (timeout) options.timeout = timeout;
            const errorCallback = function (error) {
                console.error(error);
                return reject(error);
            };
            const successCallback = function (data) {
                return resolve(data);
            };
            const completeCallback = function (data) {
                return resolve(data);
            };
            options.error = errorCallback;
            options.success = successCallback;
            //options.complete= completeCallback;
            $.manageAjax.add("default-queue", options);

            /*$.ajax(options)
                .done(function (data) {
                    return resolve(data);
                })
                .fail(function (error) {
                    console.error(error);
                    return reject(error);
                })
                .always(function () {
                    // called after done or fail
                });*/
        });

您可以在评论中看到没有ajax管理器的版本。它与POST的方式相同，就像

一样

this.DoPost = function (url, method, body, timeout) {
        try {
            body = JSON.stringify(body);
        } catch (error) {
            console.error(body);
            return reject(error);
        }
        return new Promise((resolve, reject) => {
            var options = {
                type: 'POST',
                url: url + method,
                data: body,
                contentType: "application/json",
                dataType: 'json',
                timeout: (15 * 1000) // sets timeout to 60 seconds
            };
            if (timeout) options.timeout = timeout;

            const errorCallback = function (error) {
                console.error(error);
                return reject(error);
            };
            const successCallback = function (data) {
                return resolve(data);
            };
            options.error = errorCallback;
            options.success = successCallback;
            $.manageAjax.add("default-queue", options);

            /*$.ajax(options)
                .done(function (data) {
                    return resolve(data);
                })
                .fail(function (error) {
                    console.error(error);
                    return reject(error);
                })
                .always(function () {
                    // called after done or fail
                });*/
        });
    }//DoPost

这里重要的是通过api添加新的GET / POST请求时ajax队列的名称

$.manageAjax.add("default-queue", options);

这基本上意味着您可以拥有一个或多个队列，从而改善您的请求并行性。

如何在jquery ajax请求中使用ajaxmanager？

3 个答案: