Question

在标题中，我想知道如何发送少量异步请求，并且在他们进行处理后，更改我网站的一部分（在这个例子中是一个单独的计数器）。以同步的方式做到这一点只能得到我期望获得的结果，但它会冻结网站很长一段时间。我目前的代码如下：

var twitchReq = new XMLHttpRequest;


        function twitchR(x,y)
            {
                var api_key = "some_api_key";
                var source = "https://api.twitch.tv/kraken/streams/" + y + "?&client_id=" + api_key + "&callback=";
                x.open("GET", source, false);
                x.send(null);
                var z = twitchPR();
                return z;
            }
        function twitchPR()
            {
                if(twitchReq.status == 200)
                        {
                            if(twitchReq.readyState == 4)
                                    {
                                        var a = twitchReq.responseText;
                                        var b = JSON.parse(a);
                                        var c = twitchD(b);
                                        return c;
                                    }
                        }
            }
        function twitchD(x)
            {
                if(x.stream == null)
                    {
                        console.log("Offline");

                        return 1;

                    }
                else 
                    {
                        console.log(x);

                        return 2;
                    }

            }
        function twitchWidget()
            {
               var t = [
                   "Nervarien",
                   "Jankos",
                   "LolVander",
                   "RossBoomsocks",
                   "ESL_LOL",
                   "Xayoo_",
                   "Kubon_"
               ]
                var j=0;
                var n=0;
                for(i=0;i<7;i++)
                        {


                            if(twitchR(twitchReq,t[i]) == 1)
                               {
                                    j=j+1;


                               }
                            else    
                                {
                                    n=n+1;


                                }


                        }
                document.getElementById("test-1").innerHTML = "Online: " + n + "<br>" + "Offline: " + j;
            }

我已经发现这个解决方案的棺材中的指甲在发送另一个请求之前等待一个请求完成，更不用说冻结队列中的任何其他代码了。那么：如果我的请求完成后我如何处理我的请求结果并等待其他人同时完成？

编辑：关于可能的重复＆＃39;马克 - 我已经看过那个帖子但是，我无法告诉如何解决我的问题。不同的是，他可以使用ajax承诺，而我不知道如何制作，因此无法使用那里发布的解决方案。

Answer 1

我认为你需要http://caolan.github.io/async/ lib，他们有很多方法来完成并行和系列Ajax调用。为单个方法添加一个lib是非常昂贵的，但这种代码更有条理，易于维护。

Answer 2

有几种方法可以做到这一点。我建议在这里使用HTTP请求的承诺：

// Helper function to make Http request and return a promise
function promiseHttpData(source) {
    return new Promise(function (resolve, reject) {
        var req = new XMLHttpRequest;
        req.onload = resolve.bind(null, req);
        req.onerror = reject.bind(null, req);
        req.open("GET", source);
        req.send();
    });
}

function twitchR(y) {
    var api_key = "some_api_key";
    var source = "https://api.twitch.tv/kraken/streams/" + y 
                 + "?&client_id=" + api_key + "&callback=";
    return promiseHttpData(source).then(twitchPR);
}

function twitchPR(twitchReq) {
    var a = twitchReq.responseText;
    var b = JSON.parse(a);
    var c = twitchD(b);
    return c;
}

function twitchD(x) {
    if(x.stream == null) {
        console.log("Offline");
        return 0; // Use of zero is easier to work with
    } else {
        console.log(x);
        return 1;
    }
}

function twitchWidget() {
    var t = [
       "Nervarien",
       "Jankos",
       "LolVander",
       "RossBoomsocks",
       "ESL_LOL",
       "Xayoo_",
       "Kubon_"
    ]
    var promises = t.map(twitchR); //Launch request for each

    // Get the promised values for all promises:
    Promise.all(promises).then(function (values) {
        var n = values.filter(Number).length; // returns the number of non-zeroes.
        var j = t.length - n;
        document.getElementById("test-1").innerHTML = 
            "Online: " + n + "<br>" + "Offline: " + j;
    });
}

制作多个异步委托请求并获得其返回值

2 个答案: