jquery 利用queue实现ajax请求队列简单示例

xmode

于 2022-03-11 14:38:41 发布

阅读量1.1k

点赞数

分类专栏： js/jquery

本文链接：https://blog.youkuaiyun.com/sitetesty/article/details/123424203

版权

jquery ajax javascript

js/jquery 专栏收录该内容

13 篇文章

订阅专栏

这个示例展示了如何使用JavaScript封装一个异步队列管理器，包括POST请求的实现。队列可以按顺序执行多个网络请求，如访问'/api/a'、'/api/b'和'/api/c'。当请求完成或发生错误时，会调用回调函数并清除队列。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

封装方法

var axmq = {
    //队列
    queues: [],
    //网络请求
    request: null,
    //执行队列
    render: function() {
        $(document).queue(axmq.queues);
    },
    //追加队列
    append: function(func) {
        axmq.queues.push(func);
    },
    //清除队列
    clear: function() {
        $(document).dequeue();
        if (0 === $(document).queue().length) {
            axmq.queues = [];
            $(document).clearQueue();
        }
    },
    //POST请求
    post: function(args) {
        var params = {
            url: 'https://www.sample.com/api',
            headers: {},
            data: {},
            buffer: function() {},
            callback: function() {}
        };
        $.extend(params, args);
        var headers = {
            Accept: 'application/json;charset=utf-8'
        };
        if (Object.keys(params.headers).length > 0) {
            $.extend(headers, params.headers);
        }
        if (axmq.request == null) {
            axmq.request = $.ajax({
                async: true,
                type: 'POST',
                url: params.url,
                headers: headers,
                data: params.data,
                dataType: 'JSON',
                beforeSend: function() {
                    params.buffer();
                },
                success: function(res) {
                    console.log(res);
                    axmq.request = null;
                    axmq.clear();
                    params.callback(res);
                },
                error: function(err) {
                    console.log(err);
                    axmq.request = null;
                    axmq.clear();
                    params.callback({
                        errcode: 5001,
                        errmsg: '系统繁忙'
                    });
                }
            });
        }
    },
    //示例
    sample: function() {
        axmq.append(function() {
            axmq.post({
                url: 'https://www.sample.com/api/a'
            });
        });
        axmq.append(function() {
            axmq.post({
                url: 'https://www.sample.com/api/b'
            });
        });
        axmq.append(function() {
            axmq.post({
                url: 'https://www.sample.com/api/c'
            });
        });
        axmq.render();
    }
};

调用示例