[JavaScript] 비동기 내장 통신 Fetch

FrontEnd는 디자인과 이벤트 등으로 화면  구성을 하는 것도 중요하지만, 서버와의 통신을 통해 원하는 데이터를 가져오는 것도 중요하다.

 

이 때 서버와의 통신을 위한 기능인 fetch()가 있다.

 

 //비동기 함수 httpRequest
 const httpRequest = async () => {
 	//fetch("url", {method, body, header 설정}) 요청 후 응답을 res에 저장
    const res = await fetch("http://3.39.32.181:8080/api/auth/login", {
      method: "post",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        id: inputId,
        pw: inputPw,
      }),
    })
    
    //result에 응답인 res를 json()을 통해 json으로 변환
    const result = await res.json()
  }
  
httpRequest()