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

//! 如果想要发起一个http请求 可以调用全局对象中axios函数，同时传入一个配置对象即可
const btnEle = document.getElementById('btn');
const tBodyEle = document.getElementById('listBody');

function loadData() {
  axios({
    url: 'http://localhost:3000/users', // 请求地址
    method: 'get', // 请求方法
  })
    .then((result) => {
      // axios 得到的响应 result 是什么
      console.log(result);
      let { code, msg, data } = result.data;

      // 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((err) => {
      console.log(err);
    });
}

btnEle.addEventListener('click', function () {
  console.log('开始加载数据...');
  loadData();
});