Generator 实现异步ajax

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>

  <table border="1">
    <tr>
      <td>昵称</td>
      <td>内容</td>
      <td>时间</td>
    </tr>
  </table>
  <button id="btn">获取更多</button>

  <script>
  // 简单封装 ajax
    function ajax({ method, url, scb, ecb }) {
      !method && (method = "GET");

      const xhr = new XMLHttpRequest();
      xhr.onload = scb;
      xhr.onerror = ecb;
      xhr.open(method, url);
      xhr.send();
    }
// 获取 接口
    function getUsers() {
      ajax({
        url: "http://easy-mock.ncgame.cc/mock/5c5298aec1338b1c50916de0/jianshu/comments",
        scb(res) {
          // console.log(res.currentTarget.response);
          getUsers.usersfn.next(JSON.parse(res.currentTarget.response));

        },
        ecb(err) {
          console.log(err);
        }
      });
    }


//  渲染 表格
    function render(res) {
      const tableEle = document.querySelector("table");
      console.log(res);
      const TrNodes = [];
      res.forEach(item => {
        const newTr = document.createElement("tr");
        const contentTd = document.createElement("td");
        const nicknameTd = document.createElement("td");
        const created_atTd = document.createElement("td");
        const content = document.createTextNode(item.compiled_content);
        const nickname = document.createTextNode(item.user.nickname);
        const created_at = document.createTextNode(item.created_at);
        contentTd.appendChild(content);
        nicknameTd.appendChild(nickname);
        created_atTd.appendChild(created_at);
        // newTr.append(...[contentTd, nicknameTd, created_atTd]);
        newTr.appendChild(nicknameTd);
        newTr.appendChild(contentTd);
        newTr.appendChild(created_atTd);
        tableEle.append(newTr);
      });

    }
    // Generator 主函数
    function* ajaxAction() {
      console.log("执行ajax");
      const res = yield getUsers();
      // console.log(res);
      render(res.data.comments);
    }

    function execFn() {
      // 将Generator 对象 绑定到 其中一个函数的属性中（解决一个全局变量）
      getUsers.usersfn = ajaxAction();
      getUsers.usersfn.next();
    }

    // 初始化
    execFn();

    const btn = document.getElementById('btn');
    btn.onclick = function () {

      execFn(); //  加载更多。。。
    };
   
  </script>
</body>

</html>
导航
Generator 实现异步ajax
Generator 实现 异步ajax

Generator 实现异步ajax
