강의를 듣다가, 코드 분석를 따라치며, 궁금한 점 중 알게 된 점을 조금 정리해보겠다.
알게 된 점은 틈틈히 추가 될 것
#자바스크립트, 비동기 요청 파트
window.addEventListener('load', function(){
request1.open("get", apiRandomDogs)
request1.addEventListener('load', function(){
const response = JSON.parse(request1.response)
})
request1.send()
})강아지 페이지 만들기 중,
윈도우 창이 로딩 될 때! 랜덤 강아지 사진을 가져오는 부분이다.
여기서 궁금했던 점, 왜 request1 부분의 addEventListener가,, send() 전에 들어갈까 ?
흐름 자체가.. "강아지 정보 받을 요청 할게 ? 요청 보냈어 ! 로딩 후, 로드 되면 그걸로 결과를 만들게! " 이게 흐름이 맞지 않을까 고민해봤다.
따라서 흐름이, request1.open - > send() -> reponse 이렇게가 아닐까 생각을..
=> 챗지피티의 명쾌한 답변.
window.addEventListener('load', function(){
request1.open("get", apiRandomDogs) // ① 강아지 정보를 요청할게!
request1.addEventListener('load', function(){
// ④ 로딩이 완료되면 실행됨
const response = JSON.parse(request1.response) // 응답을 JSON으로 변환할게!
})
request1.send() // ③ 이제 진짜 요청을 보낼게!
})
1️⃣ open() → 요청을 설정함.
2️⃣ addEventListener('load', ...) → "응답이 오면 처리할 준비를 해 둬!" 준비 해두는 단계.
3️⃣ send() → 요청을 보냄.
4️⃣ 조금 있다가 서버가 응답을 보냄! (load 이벤트 발생)
5️⃣ load 이벤트가 실행되면서 JSON.parse(request1.response)도 실행됨!
✨그러니까 JSON 파싱(JSON.parse(...))은 send() 실행 직후가 아니라, 응답이 도착한 후 실행되는 거야!
아아, 일단 준비만 먼저 해두고, 도착하면 그 때 변환하는 구나 ...
Q : 그럼 모든 비동기 처리를 이런식으로 해야해 ?
A : 꼭 항상 이런 방식으로 해야 하는 건 아니지만,
비동기 처리를 할 때는 "응답이 도착하면 실행할 코드"를 미리 등록하는 방식이 일반적이야!
언제 올지 모르기 때문 !