비동기 통신 fetch 사용법
DB작업을 하기 위해 뷰->컨트롤러->뷰->컨트롤러 계속 페이지를 이동해야 하는데
페이지 이동 없이 비동기 통신으로 DB기능을 구현할 수 있습니다.
-비동기 통신의 종류
promiss, fetch - JS 비동기
ajax - JQuery 비동기
axios - React 비동기
첫 번째 Fetch 방식
fetch('/', { //요청경로
method: 'POST',
cache: 'no-cache',
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
},
//컨트롤러로 전달할 데이터
body: new URLSearchParams({
// '데이터명' : 데이터값
})
})
.then((response) => {
if(!response.ok){
alert('fetch error!\n컨트롤러로 통신중에 오류가 발생했습니다.');
return ;
}
return response.text(); //컨트롤러에서 return하는 데이터가 없거나 int, String 일 때 사용
//return response.json(); //나머지 경우에 사용
})
//fetch 통신 후 실행 영역
.then((data) => {//data -> controller에서 리턴되는 데이터!
})
//fetch 통신 실패 시 실행 영역
.catch(err=>{
alert('fetch error!\nthen 구문에서 오류가 발생했습니다.\n콘솔창을 확인하세요!');
console.log(err);
});
두 번째 Fetch 방식 (많은 데이터 전달할 때)
fetch('/', { //요청경로
method: 'POST',
cache: 'no-cache',
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify(
//컨트롤러로 전달할 데이터)
})
.then((response) => {
return response.text(); //컨트롤러에서 return하는 데이터가 없거나 int, String 일 때 사용
//return response.json(); //나머지 경우에 사용
})
//fetch 통신 후 실행 영역
.then((data) => {//data -> controller에서 리턴되는 데이터!
})
//fetch 통신 실패 시 실행 영역
.catch(err=>{
alert('fetch error!\nthen 구문에서 오류가 발생했습니다.\n콘솔창을 확인하세요!');
console.log(err);
});
컨트롤러에는 비동기 통신임을 알리는 @ResponseBody를 넣어주기
fetch 데이터 전달
fetch -> controller
전달한 데이터를 컨트롤러에서 받을 땐 매개변수로 받으면 됩니다.
body: new URLSearchParams()로 데이터를 전달할 경우
데이터명이나 커맨드객체로 받으면 됨!
body: JSON.stringify로 데이터를 전달할 경우
@RequestBody를 넣어서 데이터를 받으면 됨!
controller -> fetch
컨트롤러에서 fetch로 데이터를 전달할 때는, return 값으로 주면 됩니다.
원래 컨트롤러의 return stu;를 할 경우 stu.html로 가지만
@ResposeBody로 비동기로 인식 되어 페이지 이동이 아닌 데이터가 전달이 됩니다.
fetch에서는
컨트롤러에서 전달받은 데이터가 없거나 int, String일 경우
return response.text();
그 외 나머지(객체, 리스트)는
return response.json();
