fetch test v1

제이쿼리의 종속맨으로 항상 $.ajax 만 쓰다가 이번에

바닐라 자바스크립트를 본격적으로 사용하게 되면서

(정확히는 나의 코드에서 제이쿼리를 걷어내기)

fetch 에 대해 배우게 되었고 비동기 통신 또한 ajax 가 아닌 fetch 로 갈아타고 있는 중이다.

아직은 프로미스 객체에 대해,,, 와닿지가 않고 있지만..

먼저, 기존의 ajax 동작은

1. ajax

$.ajax({
         url       : '/test1/test1'
       , data      : $("#frm").serialize()
       , async     : true
       , type      : "post"
       , dataType  : 'json'
       , beforeSend: function(xhr) {
           xhr.setRequestHeader('AJAX', true);
         }
       , success   : function(data) {
 	                   var textArea = $('#textArea');
                       console.log('data', data);
                       textArea.empty();

				       var html = "";
                       
                       html += '<li>' + data.username + '</li>'
                       html += '<li>' + data.age + '</li>'

                       textArea.append(html);
                }
                , error     : function(err) {
                    console.log('data');
                    alert('에러,,,타입 미스매치 일 것임.');
                }
            })JAVA

이런 식으로 사용을 하였다.

2. fetch

<form id="testFrm">
		<input type="text" name="name" value="name123">
		<input type="text" name="id" value="id123">
		<input type="text" name="tel" value="tel123">
		<button type="button" onclick="test()">aaaaaa</button>
</form>HTML

이런 폼을

const formData = new FormData(document.querySelector("#testFrm"))
		
	async function test() {
		const url = '/test1/test1';
		const option = {
			method : 'POST',
			header : {
				'Content-Type' : 'application/json;'
			},
			body   : formData,
		}

		let response = await fetch(url, option);
		let data = await response.json();
		console.log('data ===> ', data);
	}JAVASCRIPT

이렇게 사용하게 된다, input 값들을 따로 떼내어서 매칭을 해줄 수 도 있지만,

나는 스프링에 의하여 값들이 vo로 쏙쏙 매핑 되기를 원했다. 그래서 폼 자체를 전송하는 방법을 테스트 하였다.

3. 자바에서 받기

@Slf4j
@RequestMapping("/test1/test1")
public String test1(@ModelAttribute TestVo testVo) {
	
	System.out.println("practiceVo.getName() = " + practiceVo.getName());
	System.out.println("practiceVo.getId() = " + practiceVo.getId());
	System.out.println("practiceVo.getTel() = " + practiceVo.getTel());
    
	return null;
}JAVASCRIPT

테스트로 작성된 코드이다.

기존과 동일하게 @ModelAttribute 를 통해서 vo를 명시하고 값들을 명시한 vo 에 매핑 받을 수 있다.

처리는 기존의 비동기 방식과 동일하게 !! 

조금 더 깔끔하고 조금 더 Promise 를 예쁘게 쓸 수 있는 버전을 만들어서 작성하자.

4. P.S VO 매핑이 안될 시, POM 의존성 추가 및 DISPATCHER-SERVLET 설정 추가

<!-- https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload -->
<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.4</version>
</dependency>HTML

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
   <property name="maxUploadSize" value="2097152000"/>
</bean>