자바스크립트를 사용하면 필요할 때 서버에 네트워크 요청을 보내고 새로운 정보를 받아오는 일을 할 수 있다.
ex) 주문 전송, 사용자 정보 읽기 등
여러가지 방법이 있는데, 가장 먼저 Fetch()에 대해 알아보자.
let promise = fetch(url, [options])
・ url
- 접근하고자 하는 URL
・ options
- 선택 매개변수, method나 header 등을 지정할 수 있다
options
에 아무것도 넘기지 않으면 요청은 GET
메서드로 진행되어 url로 부터 콘텐츠를 불러온다.
fetch()
를 호출하면 브라우저는 네트워크 요청을 보내고 프라미스가 반환된다.
이 때, 반환되는 프라미스는 fetch()
를 호출하는 코드에서 사용된다.
fetch(주소)
.then((response) => response.json())
.then((data) => {
// data를 응답 받은 후의 로직
})
.catch(err => {
console.log(err);
});
fetch('주소', {
method: 'post',
body: JSON.stringify({
속성 이름 : 보내줄 값
})
})
.then(response => response.json())
.then(res => {
console.log(response);
})
[요약]
- fetch 함수를 사용하면 리소스를 비동기로 요청할 수 있다.
- fetch를 호출하면 브라우저는 요청을 보내고 Promise 객체를 반환한다.
이 때, 요청이 완료되면 성공 여부에 상관없이 Promise가 resolved 되어 Response 객체가 반환된다. (즉, 404 같은 응답 코드를 받아도 에러가 나지 않는다)- HTTP 요청이 완료되지 못한 상태면 Promise가 rejected 된다. 이 때,
catch
메서드를 사용하여 에러를 처리할 수 있다.- Response 객체는 응답에 대한 정보를 담고 있다.