[Javascript] fetch()

fetch()

원격 api를 간편하게 호출할 수 있는 내장함수.
라이브러리를 사용해도 되지만 간단한 호출에는 라이브러리의 도움 없이
내장된 fetch() 함수를 사용하여 처리할 수 있다.

 

fetch사용법.

 

fetch는 첫번째 인자로 URL, 두번째 인자로 옵션 객체를 받고
promise타입의 객체를 반환한다.
API호출이 성공 했을 경우에는 response객체를 반환하며
실패했을 경우에는 error 객체를 반환한다.

 

 

GET 요청

 

fetch()은 defualt로 get요청이므로 get요청을 할 경우 옵션인자가 필요가 없다.

 

Response {status: 200, ok: true, redirected: false, type: "cors", url: …}

API들은 위와 같이 대부분 JSON형태로 제공되며 해당 url에 표시된 내용과는 다르다.
제공받은 데이터를 사용하려면 JSON 포멧을 js객체로 변환하여 사용해야 한다.

fetch("url")
  .then((response) => response.json())
  .then((data) => console.log(data));

 

POST 요청

method가 post인 경우 fetch()에 method정보를 인자로 넣어주어야 한다.

 

fetch('url', {
    method: 'post',
    body: JSON.stringify({
        name: "Jay",
        age: 20
    })
  })
  .then(res => res.json())
  .then(res => {
    if (res.success) {
        alert("success");
    }
  })

GET요청에는 없었던 두번 째 인자에 method와 body옵션을 보내주어야 한다.
body는 JSON포멧으로 보내기 위해 JSON.stringfy()를 사용해야한다.

 

백엔드에서 응답을 주지 않을 경우에 생기는 에러발생을 위해 아래와 같이

then을 활용할 수 있다.

 

fetch('url', {
    method: 'post',
    body: JSON.stringify({
        name: "Jay",
        age: 20
    })
  })
  .then(res => {
    if (res.status === 200) {
        alert("success");
    } else if (res.status === 403) {
        return res.json();
    }
  })
  .then(res => {
    console.log("error", res.message);
  })