fetch를 사용해 Github에서 사용자 정보 가져오기
GitHub 사용자 이름이 담긴 배열을 인자로 받는 비동기 함수 getUsers(names)를 만든 후, GitHub에서 fetch한 사용자 정보들이 담긴 배열을 반환하는 함수를 만들어 보세요.
사용자명에 해당하는 사용자 정보를 가져오려면 GitHub API https://api.github.com/users/사용자명에 요청을 보내면 됩니다.
샌드박스에 테스트 코드가 준비되어 있습니다.
아래 조건들을 지켜 과제를 완수해 보세요.
- 사용자당
fetch요청은 한 번만 수행해야 합니다. - 데이터가 최대한 일찍 도착할 수 있도록 각 요청은 다른 요청의 결과를 기다려서는 안 됩니다.
- 요청에 실패하거나 존재하지 않는 사용자에 대한 요청을 보냈다면
null을 리턴하고 배열 요소에 담아야 합니다.
fetch를 통해 사용자 정보를 가져오려면 fetch('https://api.github.com/users/사용자명')를 사용해야 합니다.
응답 상태 코드가 200이면 .json()을 호출해 객체를 읽습니다.
반면 fetch가 실패하거나 응답 상태 코드가 200이 아니라면 null을 리턴하고 배열에 담아야 합니다.
답안은 아래와 같습니다.
async function getUsers(names) {
let jobs = [];
for(let name of names) {
let job = fetch(`https://api.github.com/users/${name}`).then(
successResponse => {
if (successResponse.status != 200) {
return null;
} else {
return successResponse.json();
}
},
failResponse => {
return null;
}
);
jobs.push(job);
}
let results = await Promise.all(jobs);
return results;
}.then은 fetch 직후 호출되므로 응답이 도착하면 다른 fetch를 기다리는 대신 곧바로 .json()으로 응답을 읽기 시작한다는 것을 기억하세요.
await Promise.all(names.map(name => fetch(...)))의 반환값을 대상으로 .json()을 호출한다면 모든 fetch 응답이 완료되기 전까지 기다려야 합니다. 대신 각 fetch마다 .json()을 호출하면 다른 fetch 응답을 기다리지 않으면서 JSON 형식으로 데이터를 읽을 수 있습니다.
이 예제를 통해 비록 async-await을 주로 사용하더라도 여전히 하위 수준의 프라미스(Promise) API가 유용하게 사용될 수 있음을 알 수 있습니다.