Fetch 비동기 통신

fetch()가 반환하는 프로미스 객체는 404, 500과 같은 HTTP 오류 상태를 수신해도 거부되지 않습니다. fetch()의 프로미스는 서버에서 헤더를 포함한 응답을 받는 순간 정상적으로 이행합니다. 대신, 응답의 상태가 200-299를 벗어날 경우 ok (en-US) 속성이 false로 설정됩니다. 프로미스가 거부되는 경우는 네트워크 연결이 실패하는 경우를 포함, 아예 요청을 완료하지 못한 경우로 한정됩니다.
자격 증명(credentials) 옵션 (en-US)을 제공하지 않은 경우, fetch()는 교차 출처 쿠키를 전송하지 않습니다. (2018년 4월 이후, 자격 증명 정책의 기본 값이 same-origin으로 변경됐습니다.)

Javascript fetch 통신해보기

const ArticleGet = () => {
  fetch(ARTICLE_URL, {
    method: "GET", //메소드 GET은 안써줘도 통신은 되더라.. 
    headers: {
      Authorization: "Bearer " + localStorage.getItem("user_access_token"),
      "Content-Type": "application/json",
    },
    //body: JSON.stringify(data), POST일때 body에 json 데이터를 보내줄수 있다.
  })
    .then((res) => res.json()) // 위 해당건을 기다렸다가..res.json()으로 반환한다.
    .then((res) => {
      console.log(res) // 출력해 보면, 데이터가 잘 나온걸 확인할수 있다..
    });
};

바닐라 JavaScript를 사용하므로써 AJAX는 버리고, fetch로 백엔드와 통신을 하고 있다.

물론 나는 백엔드 개발자 이므로 별로 신경쓰고 싶진 않지만...그래도 바닐라로 배우는게 훨씬 나은것 같다..

위에처럼 res로 인자를 받아서, res를 json을 받고, 다시한번 res를 출력해 본다.

사실 저위에서 res를 뜯어보면 status 값등등을 볼수 있다.

자그럼 리턴을 해야 하는데 어떻게 해야 할까?

const Article = ArticleGet()
Article.then((data) => {
  console.log(data)
}

우선 위쪽에서 해당 출력을 return res로 리턴해주고,

아래에 변수에 리턴값을 넣은걸 알수 있다.

해당 변수를 출력해보면 Promise 값으로 나오는걸 확인할수 있다.

그러므로 해당 Promise 값을 풀기 위해서는 then을 사용하여, 다시 풀어주어야 한다.

그럼 JSON 형태에 데이터가 아름답게 나오는걸 확인할수 있다.