美文网首页
(axios.js)封装函数利用jq发送多个ajax,等所有返回

(axios.js)封装函数利用jq发送多个ajax,等所有返回

作者: 孙雪冬 | 来源:发表于2017-07-11 00:23 被阅读361次

    推荐axios.js
    Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。

    • 从浏览器中创建 XMLHttpRequests
    • 从 node.js 创建 http请求
    • 支持PromiseAPI
    • 拦截请求和响应
    • 转换请求数据和响应数据
    • 取消请求
    • 自动转换 JSON 数据
    • 客户端支持防御XSRF

    下文是基于jquery的代码非axios.js代码。

    本人测试有效,如果有人用下面的方法还是行不通,可以在下面评论中说明。Axios.js是一个基于 promise 的 HTTP 库,建议大家到npm上浏览一下Axios.js,中文版传送门,以下的内容不重要。。。

    这需求我见过的有两种解决方法:
    (个人觉得还是第一种方法好些)

    1.第一种是计数法,它需要在外面声明一个能够让每个回调访问到的变量,在每个请求成功的回调函数里将此变量加1,如果变量加到最大就执行回调,但是需要在每个请求成功的回调函数里做判断。

    特点:由于ajax本来就是异步的,所以每个ajax彼此互不干扰,不必按照顺序一个接着一个加载,相对下面第二种总请求时间更短。

    计数法的demo

    function countAjax(arr,cb) {
        var len = arr.length,
            result = [],
            count = 0;
        for(let i=0; i<len; i++) {
            $.ajax({
                type: arr[i].type,
                url: arr[i].url,
                success: function(res){
                    count++;
                    result[i] = res;
                    console.log("第" + ( i + 1 ) + "个ajax回调函数 " + res);
                    if( count == len ) {
                        cb(result);
                    }
                }
            });
        }
    }
    
    var arr = [{
        url: "keepWords",
        type: "get"
    },{
        url: "xx",
        type: "get"
    },{
        url:"yy",
        type: "get"
    }];
    countAjax(arr,function(result){
        console.log("all of ajax is done",result);
    });
    

    亲测有效,在服务器那头可以setTimeout模拟网络延迟
    提示,如果有人用下面的方法还是行不通,可以在下面评论中说明!

    2.第二种是利用promise,在上一个请求完事之后,发送下一个请求。
    特点:每个ajax都要排队按顺序请求和响应,需要在上一个请求响应成功之后再进行下一个请求,是一个接着一个的。

    promise的demo

    function orderAjax(arr,cb) {
        var promise,
            result = [];
        for(let i=0,len=arr.length; i<len; i++) {
            if(!promise) {
                promise = $.ajax({
                    url: arr[i].url,
                    type: arr[i].type
                });
            }else {
                promise = promise.then(function(res) {
                    result.push(res);
                    console.log("第" + ( i ) + "个ajax回调函数 " + res);
                    return $.ajax({
                        url: arr[i].url,
                        type: arr[i].type
                    });
                })
            }
        }
        promise.then(function(res){
            result.push(res);
            console.log("第" + ( arr.length ) + "个ajax回调函数 " + res);
            cb(result);
        });
    }
    var arr = [{
        url: "keepWords",
        type: "get"
    },{
        url: "xx",
        type: "get"
    },{
        url:"yy",
        type: "get"
    }];
    orderAjax(arr,function(result) {
        console.log('all of ajax is done',result);
    })
    

    亲测有效,在服务器那头可以setTimeout模拟网络延迟
    提示,如果有人用下面的方法还是行不通,可以在下面评论中说明!
    另外强推荐axios.js
    Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。

    • 从浏览器中创建 XMLHttpRequests
    • 从 node.js 创建 http请求
    • 支持PromiseAPI
    • 拦截请求和响应
    • 转换请求数据和响应数据
    • 取消请求
    • 自动转换 JSON 数据
    • 客户端支持防御XSRF

    相关文章

      网友评论

          本文标题:(axios.js)封装函数利用jq发送多个ajax,等所有返回

          本文链接:https://www.haomeiwen.com/subject/pxhphxtx.html