JSON
JavaScript Object Notation
일반적으로 서버에서 클라이언트로 데이터를 보낼 때 사용하는 양식
/* example */
{
"name": "John Doe",
"languages": ["JavaScript", "Python"],
"address": {
"street": "123 Main St",
"city": "Anytown",
},
"email": null
}
fetch()
비동기 함수로 네트워크를 통해 리소스를 가져오는데 사용된다. 일반적으로 서버에서 데이터를 가져오거나 API로부터 데이터를 요청할 때 사용된다.
// 기본 구조
fetch(url[, options])
.then(response => {
// 서버로부터 받은 응답 처리
})
.catch(error => {
// 오류 처리
});
- url (필수): 가져올 리소스의 URL
- options (선택): 요청에 대한 옵션을 설정하는 객체. 이 객체에는 method, headers, body 등을 지정할 수 있다.
- ex) GET 또는 POST 요청을 설정하거나 특정 헤더를 추가
- then(): 비동기 작업이 성공적으로 완료될 때 실행되는 콜백 함수. 콜백 함수는 서버로부터 받은 응답을 처리하는 데 사용된다. response 객체에는 응답 상태 코드, 헤더 정보 및 응답 본문 데이터 등이 포함되어 있다.
- catch(): 요청 중에 발생한 오류를 처리하는 콜백 함수
/* EXAMPLE */
fetch('https://api.example.com/data')
// fetch() 함수로부터 받은 HTTP 응답 객체를 가져와서 json() 호출하여 JSON으로 파싱 후 반환
.then(response => response.json())
.then(data => {
// JSON 데이터를 처리
console.log(data);
})
.catch(error => {
// 오류 처리
console.error('오류 발생: ', error);
});