[JS] fetch 메소드 (get)

fetch 함수는 브라우저에서 제공하는 API 메소드로, 서버에 정보를 요청하고 받아올 수 있는 메소드다.

 

 

 

fetch 함수는 첫번 째 인자로 url을 받고, 두번 째 인자로 [선택] option객체를 받아 Promise 타입의 객체를 반환한다.

let promise = fetch(url, [options])

option에 아무 값도 주지 않을 경우 GET메소드가 실행되며 url의 컨텐츠를 다운로드 한다.

 

 

fetch 함수는 HTTP Status Code가 404나 500을 반환해도 HTTP error를 reject하지 않는다. 대신 HTTP의 상태는 응답 프로퍼티인 status와 ok를 통해 확인할 수 있고, Status가 200-299가 아닐 경우 ok는 false상태인 resolve가 반환된다.

 

 

status :    HTTP Status Code

ok :    HTTP Status Code 가 200 - 299 사이면 true

 

fetch('https://jsonplaceholder.typicode.com/todos')
    .then(res => {
        console.log(res);
        return res.json();
    }).then(data => {
        console.log(data);
    });

JSONPlaceholder 의 API 서비스를 통해 fetch 함수의 response객체를 받고 해당 객체를 json형태로 변환한다. 

fetch 함수가 브라우저에서 제공하는 메소드라 그런지 vs code 내에서 디버깅 하려 했더니 안 되고(ㅠㅠ) html과 연결해 live server로 실행시켰다.

 

console 창!

 

status : 200

ok : true

로 뜬다!

 

 

찾아보니까 api마다 명세서가 있고 그에 따라 fetch 함수를 작성해야 하는 것 같다. 

 

fetch('https://jsonplaceholder.typicode.com/todos/1')
    .then(res => {
        console.log(res);
        return res.json();
    }).then(data => {
        console.log(data);
    });

 

하나의 객체만 가져오기 위해서 url을 수정하고 그에 따른 결과를 console로 출력했다.

 

 

 

 

 

 

 

 

 

 

참고한 사이트 : https://ko.javascript.info/fetch

https://www.daleseo.com/js-window-fetch/