📌 fetch 사용 예제
const f = fetch('https://raw.githubusercontent.com/paullabkorea/coronaVaccinationStatus/main/data/data.json')
.then(data => {
console.log('데이터 받기 성공!')
const jsonData = data.json()
return jsonData
})
.then(json => {
json.forEach(item => {
console.log(item)
const h2 = document.createElement('h2')
h2.innerText = item['시·도별(1)']
document.body.append(h2)
const p = document.createElement('p')
p.innerText = item['총인구 (명)']
document.body.append(p)
})
})
.catch(e => {
console.log('json 변환 실패!!')
})💡 오류가 발생한다면?
아래는 일부러 json 주소를 틀리게 작성하여 오류를 내보았다.
데이터를 불러오지 못하기 때문에 catch에서 오류 문구가 실행되었다.
그렇다면 여기서 하나의 의문점이 있다.
똑같이 주소를 틀리게 작성하고 오류를 냈는데 왜 then에 있던 콘솔로그가 찍힌 것일까?
그건 바로 fetch가 Promise의 resolve 값 그 자체이기 때문이다.
그래서 일단은 fetch에 then이 사용되면 오류가 나더라도 일단 then을 실행시킨다. (단 404 오류가 뜰 것이다.)
위의 코드를 살펴보면, 일단 오류는 났지만 then을 실행시켰고, 오류의 근원인 data.json()의 값을 return하기 전인 console.log(’데이터 받기 성공!’)이 찍힌 후 catch가 실행됨을 알 수 있다.
console.log(’데이터 받기 성공!’)을 return 아래로 내려주자 다시 catch값만 보여지고 있다. 이유는 당연히 retrun과정에서 오류가 났기 때문에 미처 console.log(’데이터 받기 성공!’)를 실행시키지 못하고 catch로 넘어갔기 때문이다.
