Do-it! JS 실습 복습 #unit 4 🤔

04. 서버와 통신하기

 

📖 복습 내용

서버 통신

 

👉 fetch API

---

12-1. 서버에 있는 JSON자료 표시

 

let xhr = new XMLHttpRequest();
const url="https://reqres.in/api/products/10";
const result=document.querySelector("#result");

xhr.open("GET",url);
xhr.send();

xhr.onreadystatechange=function(){
    if(xhr.readyState ==4 && xhr.status==200){
        let goods = JSON.parse(xhr.responseText);
        result.innerHTML=`
        상품명: ${goods.data.name} <br/>
        생산년도:${goods.data.year}
        `;
    }
}

 

 

✅ Point

JSON 연결하는 과정

 

 

12-2 try catch , throw

 

const userNumber=document.querySelector("#user-number");
const btn=document.querySelector("button");
const result=document.querySelector("#result");

btn.addEventListener("click",()=>{
    console.log(userNumber.value);

    try{
        if(userNumber.value>10){
            throw "10보다 작은 수를 입력하세요!"
        }else{
            result.innerHTML=`
            ${userNumber.value}
            `;
        }
    }catch(err){
        alert(err);
    }
})

 

✅ Point

try catch 문

throw "에러메세지"

 

---

13. JSON을 이용한 명언 추출

 

const result=document.querySelector("#result");
const quotoDiv=document.querySelector(".quote");
const authorDiv=document.querySelector(".author");
 
fetch("https://dummyjson.com/quotes")
.then(response=>response.json())
.then(quoteList=>showQuote(quoteList));

function showQuote(a){
    try{
        let rdNum=Math.floor((Math.random()*a.quotes.length)+1)
        quotoDiv.innerHTML=`${a.quotes[rdNum].quote}`;
        authorDiv.innerHTML=`${a.quotes[rdNum].author}`;
    }catch(err){
        console.error(err);
    }
}

 

✅ Point

fetch().then().catch()

querySelector(selector)

selector의 구체적인 그룹과 일치하는 document안 첫번째 엘리먼트를 반환한다.

일치하는게 없으면 null반환한다.

 

 

참고사이트

querySelector vs getElemenBytId