데이터를 불러오고 싶어! ⭐️ fetch ⭐️
우선 fetch 기본 골격에 대해 알아보자.
fetch("주소 URL 입력")
.then(res => res.json())
.then(data => data{"데이터를 가지고 왔을때 하고 싶은 것"});간단하게 위의 코드로 데이터를 가져왔을 때 하고 싶은 코드를 적어 수행하고 싶은것을 수행시킬 수 있다.
위 코드를 설명하자면 아래와 같다.
.then(res => res.json())주소가 올바르다면 res(request의 약자로 보통 사용. res 혹은 req로 사용한다고 함)를 json형태로 받을거야~라는 뜻
보통 저런 api 주소를 입력하게 되면 json 형태이기 때문이라고 한다.
.then(data => data{"데이터를 가지고 왔을때 하고 싶은 것"});주소가 올바르다면 data{} 의 중괄호({})안에 하고싶은 행위에 대한 코드를 작성하면 된다.
보통은 가져온 값을 화면에 뿌려주기 위해 사용하기 때문에 반복문을 사용하여 append 메서드를 사용하는 편이다.
그럼 만약 실패했을 땐 어디로 넣어야 하나? 🤔 라는 의문이 들어서 검색해본 결과, async의 catch로 에러를 return 해 준다고 한다.
async에 대해서는 내용이 길어질 것 같아 다음 포스팅에서 전체적으로 정리해볼 예정!
✨ 𝑬𝒗𝒆𝒓𝒚𝒕𝒉𝒊𝒏𝒈 𝒄𝒐𝒎𝒆𝒔 𝒕𝒐 𝒉𝒊𝒎 𝒘𝒉𝒐 𝒉𝒖𝒔𝒕𝒍𝒆𝒔 𝒘𝒉𝒊𝒍𝒆 𝒉𝒆 𝒘𝒂𝒊𝒕𝒔. ✨