[Javascript] 비동기 프로그래밍, fetch, await, async

🌐 예제용 서버 요청

경기 결과

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등 주자 선택
2. 해당 주자의 상세정보 받아온 뒤 학교 코드 추출
3. 해당 학교의 정보 받아오기

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();