fetch api

• 비동기 http 요청을 좀 더 쓰기 편하게 해주는 api
• XMLHTTPRquest 를 대체
• Promise 기반으로 동작

fetch api 사용

fetch('https://kdt.roto.codes/todos')
    .then(res => { // response 받기
        return res.json();
    })
    .then(todos => { console.log(todos);})

response 객체를 얻은 뒤엔 응답을 json으로 바꾸거나 text로 바꾸는 등의 처리를 해줘야 한다.

Response.blob() => 이미지 객체로 변환

fetch api는 HTTP error가 발생하더라도 reject 되지 않는다.
네트워크 에러나 요청이 완려되지 못한 경우에만 reject 된다.

그래서 서버 요청 중 에러가 생겼을 경우에도 then으로 떨어지므로, response의 status code나 ok를 체크하는 것이 좋다.

Response.ok 값을 체크해줘야 한다!
 ok가 안되면=> throw new Error()로 처리

res.ok는 status가 200 ~ 299 사이인 경우 true가 된다.
따라서 300대일 때는 처리되지 않는다.

fetch api 사용
fetch의 두번째 인자로 옵션을 줄 수 있다.

fetch( '[URI]' , {method : 'POST', headers, body : JSON.stringify(product)})