JS 实现批量顺序处理异步查询逻辑

162 阅读1分钟

使用生成器方式实现:

生成器函数就是返回一个迭代器的函数,包含一个*,在它的函数体内使用yield关键字,函数会在每个yield后暂停,等待,直到这个生成的对象, 然后调用下一个next()方法,每调用一次next会往下执行一次yieId,然后暂停直到最后结束

具体例子如下:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <textarea name="" id="textarea" cols="30" rows="10"></textarea>
    <button onClick="clickFunc()">查询</button>
  </body>
  <script
    type="text/javascript"
    src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"
  ></script>
  <script>
    var url =
      "https://localhost/geo?key=160cab8ad6c50752175d76e61ef92c5x&address=";
    var result_obj = new Map();
    var task = null;
    function clickFun() {
      var oText = $("#textarea");
      var vals = oText.val();
      var val_tmp = vals.split(",");
      var arr = [];
      console.log("val_tmp--", val_tmp);
      // 开发触发第一次task
      task = loadFun(url, val_tmp);
      task.next();
      
      const obj = Object.fromEntries(result_obj);
      console.log(obj);
      console.log("result_obj--结束啦", result_obj.entries());
    }

    function clickFunc() {
      clickFun();
    }

    function* loadFun(url, val_tmp) {
      for (let i = 0; i < val_tmp.length; i++) {
        var item = val_tmp[i];
        // yield 任务
        var res = yield load(url, item);
        console.log("iii", i);
      }
    }

    function load(url, item) {
      item = item.trim();
      url += item;
      url += "";
      var xhr = new XMLHttpRequest();
      xhr.open("GET", url);
      xhr.send();
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          var json = xhr.responseText;
          var json_tmp = json;
          json_tmp = json_tmp.substr(0, json_tmp.lastIndexOf(")"));
          json_tmp = json_tmp.split("jsonp_242455_(")[1];
          var result = $.parseJSON(json_tmp);
          var geocodes = result.geocodes && result.geocodes[0];
          var tmppp =
            geocodes.province + "  " + geocodes.city + "  " + geocodes.district;
          result_obj.set(item, tmppp);
          // 调用下一个next方法
          task.next();
          console.log(result_obj);
        }
      };
      xhr.onerror = function (error) {
        console.log("error====", error);
      };
    }
  </script>
</html>