[Javascript] fetch() 함수를 이용한 API 통신

프론트에서 서버(백엔드) API를 호출하면 데이터를 받아올 수 있다. 자바스크립트 Web API fetch 함수를 쓰면 서버 API를 통신할 수 있다.

fetch() 함수

fetch('api 주소')
  .then(res => res.json())
  .then(res => {
  // data를 응답 받은 후의 로직
});

---

fetch('api 주소')
  .then(function(res) {
    return res.json();
  })
  .then(function(res) {
    // data를 응답 받은 후의 로직
  });

로그인 시 api 로직

handleLogin = () => {
    const { userID, userPW } = this.state;

    fetch("http://주소/signin", {
        method: "POST",
        body: JSON.stringify({
          email: userID,
          password: userPW,
        }),
    })
    .then((response) => response.json())
    .then((result) => {
        if (result.Authorization) {
          localStorage.setItem("token", result.Authorization);
          this.props.history.push("main");
        } else if (result.message === "UNAUTHORIZED") {
          alert("아이디나 비밀번호를 확인해주세요.");
        }
    });
  }
};