JS 코드따라읽기

 

async function read() {
	const response = await fetch("http://abc.com/posts");
    
    if (response.status === 200) {
    	document.getElementById("post").innerText = await respose.text();
    } else {
    	window.alert("오류발생");
    }
}

 

 

알고넘어갈것

 

async function : 비동기 함수를 선언

비동기 함수는 Promise 객체를 반환하며 내부에서 await를 사용할 수 있다.

위 코드에서는 await를 사용하기 위해 비동기 함수를 선언함

 

await : 비동기 작업을 응답이 올때까지 기다릴 수 있게함

fetch는 비동기로 http 요청을 보내기때문에 응답을 기다리기 위해 await를 사용함 

fetch()는 성공하면 Response 객체를 반환함

 

Response 객체는 Http응답 정보를 담고 있다

.status = 상태코드

.ok = 상태코드가 200 ~ 299이면 true 반환

.json() = 응답을 json으로 변환(promise)

.text() = 응답을 text로 변환(promise)

 

document.getElementById("post").innerText : html문서에서 특정 요소를 선택하고 그 내용을 변경하는 코드

.innerText는 해당 요소의 텍스트를 변경한다는 의미고

 

await response.text() : 응답을 텍스트로 변환후 요소의 텍스트에 표시하겠다