🌐 예제용 서버 요청
경기 결과
https://showcases.yalco.kr/javascript/mockserver/race-result
각 선수들 정보
https://showcases.yalco.kr/javascript/mockserver/runners/{1~5}
학교 정보
https://showcases.yalco.kr/javascript/mockserver/schools/{1~3}
Fetch API
- Web API에서 제공하는 기능 - 즉 브라우저에서 제공
- 네트워크로부터 리소스를 받아오기 위한 다양하고 강력한 기능들 제공
- 👉 MDN 문서 보기
- 보다 오래된 방법: 🔗 XMLHttpRequest
fetch 메서드
- 네트워크 통신으로 원격에 요청을 보내고 답을 받아오는 프로미스를 반환
- 👉 MDN 문서 보기
// 💡 결과가 Promise의 인스턴스임 확인
console.log(
fetch('https://showcases.yalco.kr/javascript/mockserver/race-result')
);
fetch('https://showcases.yalco.kr/javascript/mockserver/race-result')
.then(response => {
console.log(response);
return response;
})
.then(response => response.json())
.then(console.log);
반환되는 결과 ( response )
- 요청의 결과에 대한 정보들을 담은 객체
json메서드 - 결과의 body로 받은 텍스트를 JSON 객체로 변환하여 반환
주소 등이 잘못된 경우 등 에러상황시 catch에서 처리
fetch('https://WRONG-ADDRESS')
.then(response => response.json())
.then(console.log)
.catch(msg => {
console.error(`😳 에러 발생: ${msg}`)
})
.finally(() => {
console.log('- - 통신 종료 - -')
})
예제의 결과들 미리보기
const SERVER_URL = 'https://showcases.yalco.kr/javascript/mockserver/';
fetch(SERVER_URL + 'race-result')
.then(response => response.json())
.then(console.log)
.catch(console.error);
[1, 2, 3, 4, 5].forEach(item => {
fetch(`${SERVER_URL}runners/${item}`)
.then(response => response.json())
.then(console.log)
.catch(console.error);
});
[1, 2, 3].forEach(item => {
fetch(`${SERVER_URL}schools/${item}`)
.then(response => response.json())
.then(console.log)
.catch(console.error);
});
🔗 연속 fetching 예제
- 경기 결과를 받아온 뒤 1등 주자 선택
- 해당 주자의 상세정보 받아온 뒤 학교 코드 추출
- 해당 학교의 정보 받아오기
1. 프로미스 형태로 구현
const SERVER_URL = 'https://showcases.yalco.kr/javascript/mockserver/';
fetch(SERVER_URL + 'race-result')
.then(result => result.json())
.then(arry => {
return arry.sort((a, b) => {
return a.record - b.record
})[0].runner_idx
})
.then(winnerIdx => {
return fetch(`${SERVER_URL}runners/${winnerIdx}`)
})
.then(result => result.json())
.then(({school_idx}) => school_idx)
.then(schoolIdx => {
return fetch(`${SERVER_URL}schools/${schoolIdx}`)
})
.then(result => result.json())
.then(console.log)
.catch(console.error);
2. async, await으로 구현
const SERVER_URL = 'https://showcases.yalco.kr/javascript/mockserver/';
async function getWinnersSchool () {
const raceResult = await fetch(SERVER_URL + 'race-result')
.then(result => result.json());
const winnerIdx = raceResult
.sort((a, b) => {
return a.record - b.record
})[0].runner_idx;
const winnerInfo = await fetch(`${SERVER_URL}runners/${winnerIdx}`)
.then(result => result.json());
const schoolIdx = winnerInfo.school_idx;
const schoolInfo = await fetch(`${SERVER_URL}schools/${schoolIdx}`)
.then(result => result.json());
console.log(schoolInfo);
}
getWinnersSchool();