티스토리 뷰
fetch('https://api.example.com/data') // 첫 번째 인자로 요청을 보낼 url을 받는다.
// fetch함수는 promise를 반환.
// then()은 promise chain
// 서버로부터 받은 response객체를 처리합니다.
.then((response) => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
// response 본문을 json형태로 파싱. 얘도 promise 반환
return response.json();
})
// 여기서 또 then()으로 chain
.then((data) => {
// 서버에서 반환된 데이터를 사용할 수 있게 된다.
console.log(data);
})
.catch((error) => {
// 네트워크 요청 중 발생한 에러를 처리한다.
console.error('Error:', error);
});
fetch(url)
- - params: 가져오려는 리소스 경로
- - return: 요청에 대한 promise로 서버가 헤더를 포함한 응답을 하는 순간 이행한다.
(서버가 HTTP 오류 응답 코드로 응답해도 이행함)
위 예시는 GET 요청을 보내고 JSON 응답을 처리하는 간단한 예제이다.
Fetch API는 다양한 HTTP 메서드(GET, POST, PUT, DELETE 등)와 헤더, 요청 본문 등을 설정할 수 있는 다양한 기능이 있다.
'[개발] > JavaScript' 카테고리의 다른 글
| truthy 한 경우: 데이터가 존재하는 경우 (0) | 2023.06.27 |
|---|---|
| cookie, localStorage, sessionStorage (0) | 2023.06.26 |
| 명령형 vs 선언적 프로그래밍 (0) | 2023.06.21 |
| map 과 filter 차이 (0) | 2023.06.07 |
| e.target.value 이벤트 객체에서 value값 가져오기 (0) | 2023.06.07 |