fetch와 await를 이용해 페이지에 데이터를 요청하고 응답받는 과정을 만들어 봅니다.
비동기 작업을 동기적으로 처리하는 것처럼 보이지만, 비동기로 동작합니다.
await를 통해 Promise(오래걸리는 작업)를 처리하기 위한 문법입니다.
// saveForm 디자인
function renderSaveForm(){
clear();
let dom = `
<form>
<input type="text" id="title" placeholder="제목"></br>
<input type="text" id="content" placeholder="내용"></br>
<button type="button" onclick="sendSave()">글쓰기</button>
</form>
`;
root.innerHTML = dom;
}
async function sendSave(){
// 1. 사용자 입력값 받기
let board = {
title: document.querySelector("#title").value,
content: document.querySelector("#content").value,
};
// 2. JSON 변환
let requestBody = JSON.stringify(board);
console.log(requestBody);
// 3. API 요청
let response = await fetch("http://localhost:8080/api/board",{
method: "post",
body: requestBody,
headers: {
"Content-Type":"application/json; charset=utf-8"
}
});
let responseBody = await response.json();
console.log(responseBody);
// 4. 응답 처리
renderList();
}위 코드들은 “글 저장하기” 페이지에서 글쓰기 버튼을 누르면 진행되는 작업코드입니다.
function sendSave()에서 3. API요청을 보면 서버에 요청을 할때 await fetch를 통해 작업이 진행되는 것으로 보았습니다.
사용자 입력 값들을 받아 자바스크립트 객체로 만들고, 이것을 JAVA서버에서 해석을 할 수 있도록
JSON.stringify(board); 를 통해 json형식으로 변환하여 서버에 데이터를 넘겨줍니다.
headers에서는 Content-Type을 통해 보내는 데이터가 json이라는 것을 명시해줍니다.
headers: {
"Content-Type":"application/json; charset=utf-8"
}POST 요청으로 받은 서버는 body에 실려온 json형식의 오브젝트를 요청한 작업대로 처리해줍니다.
순서대로 진행이 되었다면 서버에서는 응답(코드: 200 등) 을 보내어오고
응답으로 온 데이터를 스크립트에서도 읽을 수 있도록 await response.json()으로 변환해줍니다.
이것을 해당 메서드에서는 콘솔로 확인하고 있습니다.
이후 응답처리를 통해 사용자가 편리할 수 있는 방식으로 처리해줍니다.
응답처리 = 사용자 편의 지향
Share article
