[TIL 12] fetch!
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);})
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)})
Author And Source
이 문제에 관하여([TIL 12] fetch!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@nyoung113/TIL-12-fetch저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)