Udemy/Web Dev BootCamp

Fetch Random User Profile Generator 코드리뷰

렛츠기릿 2019. 2. 17. 17:18
Udemy The Advanced Web Developer Bootcamp에서는 프로젝트 중심으로 강의를 진행하고있다.

강의를 한번듣고 바로 좋은 코드를 작성하진 못하지만 이런 리뷰를 통해서 코드에 대한 이해도가 더 생겼으면 좋겠다.

1

var url = "https://randomuser.me/api";1var url = 'https://randomuser.me/api/';
2var name = document.querySelector("#fullname");2var fullnameDisp = document.querySelector("#fullname");
3var img = document.querySelector("#avatar");3var avatar = document.querySelector("#avatar");
4var username = document.querySelector("#username");
4var city = document.querySelector("#city");5var city = document.querySelector("#city");
5var email = document.querySelector("#email");6var email = document.querySelector("#email");
67
7var btn = document.querySelector("#btn");8var btn = document.querySelector("#btn");
8btn.addEventListener("click", function(){9btn.addEventListener("click", function(){
9 fetch(url)10 fetch(url)
10 .then(handleErrors)11 .then(handleErrors)
11 .then(parseJSON)12 .then(parseJSON)
12 .then(updateProfile)13 .then(updateProfile)
13 .catch(printErrors)14 .catch(displayErrors);
14});15});
1516
16function handleErrors(res){17function handleErrors(res){
17 if(!res.ok){18 if(!res.ok){
18 throw Error(res.status);19 throw Error(res.status);
19 }20 }
20 return res;21 return res;
21}22}
2223
23function parseJSON (res){24function parseJSON (res){
24 res.json();25 return res.json().then(function(parsedData){
25 return res.json();26 return parsedData.results[0];
26 console.log(res.json());27 })
27} 28}
2829
29function updateProfile(){30function updateProfile (data){
30 img = response.results.picture.large;31 var fullname = data.name.first + " " + data.name.last;
31 name = data.results.name.first + data.results.name.last;32 fullnameDisp.innerText = fullname;
32 email = data.results.email;33 avatar.src = data.picture.medium;
33 city = data.results.location.city;34 username.innerText = data.login.username;
35 city.innerText = data.location.city;
36 email.innerText = data.email;
34}37}
3538
36function printErrors(err){39function displayErrors(err){
40 console.log("INSIDE displayErrors!");
37 console.log(err);41 console.log(err);
38}42}