VIP20/12_Ajax/day-2/code/1.js

const tBodyEle = document.getElementById('listBody');
// fetch 的 第一个参数 为 请求的地址；第二个参数为 请求的配置对象
fetch('http://localhost:3000/users', {
  method: 'get', // 设置请求的方法
})
  .then((res) => {
    // 请求成功
    // 这里看一下成功的值 是什么
    // console.log(res);
    // res 是 一个 Response对象 我们不能直接处理
    // 需要使用res.json()方法将响应对象的数据 转换成 js对象才可以
    return res.json();
  })
  .then(({ code, msg, data }) => {
    // 在这个then方法中 去接收 res.json()的结果
    // console.log(data);
    console.log(msg);

    // 2 校验数据的正确性，只有code == 200时 数据是正确的
    if (code !== 200) {
      return;
    }

    var tr, td;
    data.forEach((user) => {
      // 每循环一次，就新建一个tr DOM对象
      tr = document.createElement('tr');
      // 字符串拼接，在原生js操作dom中会频繁发生，但是存在一个问题 就是代码可读性 太低
      //  因此 在ES6 对字符串进行了一个扩展。叫做 模板字符串。
      //   模板字符串 中 可以 换行；也可以通过${}语法 将外部表达式的值 嵌入字符串中的指定位置
      td = `
        <td>
          <img class="avatar" src="${user.avatar}" alt="avatar" />
        </td>
        <td>${user.name}</td>
        <td>${user.password}</td>
        <td>${user.age}</td>
        <td>${user.sex === '0' ? '女' : '男'}</td>
      `; // 这就是模板字符串
      tr.innerHTML = td;
      // 下次循环开始前，记得将新建tr添加给tbody元素
      tBodyEle.append(tr);
    });
  })
  .catch((reason) => {
    // 当请求失败的时候，输出一下失败的原因
    console.log(reason);
  });

// xhr.onload = function () {
//   let res = xhr.responseText;
//   // console.log(res);
//   // res 就是 服务器端 响应给我们的 json字符串类型数据
//   // 接下来处理 数据
//   //  就是使用table表格来展示这些数据
//   //TOOD 将数据 转换成 tr，添加到tbody中
//   // 1 将json数据 -> js对象
//   // let data = JSON.parse(res);

//   let { code, msg, data } = JSON.parse(res);

//   console.log(msg);

//   // 2 校验数据的正确性，只有code == 200时 数据是正确的
//   if (code !== 200) {
//     return;
//   }

//   // 3 数据是正确的
//   //  data 变量 存的就是所有用户信息对象 是一个数组
//   var tr, td;
//   data.forEach((user) => {
//     // 每循环一次，就新建一个tr DOM对象
//     tr = document.createElement('tr');
//     td =
//       '<td><img class="avatar" src="' +
//       user.avatar +
//       '" alt="avatar" /></td>' +
//       '<td>' +
//       user.name +
//       '</td>' +
//       '<td>' +
//       user.password +
//       '</td>' +
//       '<td>' +
//       user.age +
//       '</td>' +
//       '<td>' +
//       (user.sex === '0' ? '女' : '男') +
//       '</td>';

//     // console.log(td);
//     tr.innerHTML = td;
//     // 下次循环开始前，记得将新建tr添加给tbody元素
//     tBodyEle.append(tr);
//   });

//   // console.log(`output->data`, data);
// };

// xhr.send();