2021년 2월 3일 복기(TIL ChatterBox, fetch API)

오늘은 하루종일 뭘한건지 잘 모르겠지만

https://www.youtube.com/watch?v=FN_ffvw_ksE

fetch에 대해서 공부했다.

function fetchData() {
  fetch("https://reqres.in/api/users").then((response) => {
    console.log(response);
  });
}

fetchData();

Response

https://developer.mozilla.org/en-US/docs/Web/API/Response

function fetchData() {
  fetch("https://reqres.in/api/users").then((response) => {
    const data = response.json();
    console.log(data);
  });
}

fetchData();

Promise가 나온다.

function fetchData() {
  fetch("https://reqres.in/api/users")
    .then((response) => {
      return response.json();
    })
    .then((data) => {
      console.log(data);
    });
}

fetchData();

function fetchData() {
  fetch("https://reqres.in/api/users")
    .then((response) => {
      return response.json();
    })
    .then((data) => {
      console.log(data.data);
    });
}

fetchData();

function fetchData() {
  fetch("https://reqres.in/api/users")
    .then((response) => {
      console.log(response);
      if (!response.ok) {
        throw Error("ERROR");
      }
      return response.json();
    })
    .then((data) => {
      console.log(data.data);
      const html = data.data.map((user) => {
        return `<p>Name: ${user.first_name}</p>`;
      });
      console.log(html);
      document
        .querySelector("#app")
        .insertAdjacentHTML("afterbegin", "<p>hello</p>");
    })
    .catch((error) => {
      console.log(error);
    });
}

function fetchData() {
  fetch("https://reqres.in/api/users")
    .then((response) => {
      console.log(response);
      if (!response.ok) {
        throw Error("ERROR");
      }
      return response.json();
    })
    .then((data) => {
      console.log(data.data);
      const html = data.data
        .map((user) => {
          return `
          <div class = "user">
            <p><img src ="${user.avatar}" alt="${user.first_name}"</p>
            <p>Name: ${user.first_name}</p>
            <p>Email: ${user.email}</p>
          <div>
          `;
        })
        .join("");
      console.log(html);
      document.querySelector("#app").insertAdjacentHTML("afterbegin", html);
    })
    .catch((error) => {
      console.log(error);
    });
}

fetchData();

function postData() {
  fetch("https://reqres.in/api/users", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      name: "morpheus",
      job: "leader",
    }),
  })
    .then((response) => {
      console.log(response);
      if (!response.ok) {
        throw Error("ERROR");
      }
      return response.json();
    })
    .then((data) => {
      console.log(data);
    })
    .catch((error) => {
      console.log(error);
    });
}

postData();