fetch 함수

fetch함수는 API를 사용하여 백엔드 서버와 비동기 요청을 하는 방식 중 하나이다. 아래의 코드는 로그인을 위한 방식이기 때문에 사전에 회원가입이 되어있어야 한다. 나는 postman을 통해 백엔드로부터 정보를 받아 회원가입을 진행했고
jeonghyun, kim95가 각각 아이디와 비밀번호이다.

• method
  method는 GET POST DELETE 등이 있는데, GET은 어떠한 정보를 가져올 때, POST는 어떠한 정보를 백에 보낼 때, DELETE는 단어 그대로 삭제할 때 사용. 메서드의 디폴드값은 GET이기 때문에 아무런 정보를 적지 않으면 GET으로 적용된다.

• headers
  API 응답에 대한 헤더정보를 담고있다.

• body
  전달하고자 하는 응답 내용이다. 백과 통신할 때는 객체로 통신하기 때문에 객체타입으로 작성해야한다.

method, headers, body는 전달하고자하는 정보에 대한 정보이기 때문에 정보를 가져올 때, 즉 GET하는 경우에는 작성해줄 필요는 없다.

fetch('http://localhost:8000/login/', {
  method: 'POST',
  headers: {
      'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    'email': 'jeonghyun',
    'password': 'kim95'
  })
})
.then(response => response.json())
.then(response => {
  if (response.token) {
    localStorage.setItem('token', response.token);
  }
})

then 함수

자바스크립트에서 함수는 동기함수, 비동기함수로 나뉜다.
우리가 작성한 코드들은 위에서부터 아래로 순차적으로 코드가 실행되고 하나의 코드가 종료되지않는다면 다음 코드로 넘어가지 않는다. 이것이 동기함수이다.
API를 호출할 때, 사용하는 fetch 함수는 대표적인 비동기함수이다.

fetch 함수가 비동기함수입니다.
그렇기 때문에 로직이 끝나지 않더라도 다음 로직으로 넘어갑니다.
그런데 , 그게 문제가 된다. 데이터를 받아오는데 다 받아오지도 않았는데 다음 로직으로 넘어가면 문제가 됩니다.
그렇기 때문에 API 로부터 받아온 정보를 사용하기 위해서 then 함수를 사용하게 됩니다.

.then(response => response.json())

.then(response => {
  if (response.token) {
    localStorage.setItem('wtw-token', response.token);
  }
})

fetch 함수가 끝나게 되면 위의 코드가 실행되게 됩니다.