Fetch

fetch란 JavaScript에서 서버에 네트워크 요청을 보내고 정보를 받아오기 위해 사용하는 라이브러리다.

 

 

Form의 한계점

기본적으로 클라이언트에서 서버로 데이터를 전송하기 위해서는 html의 form 태그를 이용하여 아래처럼 나타냈다.

<form action="/item/order" method="POST" >
    <div class="product-configuration">
        <div class="cable-config">
            <span>Purchase Percent</span>
            <div class="textbox">
                <input type="number" min='1', max='{{item.percent}}' id="percent_input" onkeyup='getPercent()' name="purchasePercent" >
            </div>
        </div>
    </div>

    <p id='price' style="display:none;">{{item.price}}</p>
    <div class="product-price">
    	<input href="#" type="submit" class="cart-btn" onclick='requestPay()' value ="buy">
    </div>
</form>

 

하지만 사용자의 입력을 받은 이외의 값을 서버로 전송하기 위해서 input태그에 display:none을 추가해서 사용했다. 하지만 fetch를 이용하면 입력받은 정보 뿐만 아니라 원하는 정보도 json 형태로 서버로 전송할 수 있다.

<form action="/item/order" method="POST" >
<div class="product-configuration">
	<div class="cable-config">
	<span>Purchase Percent</span>
    	<div class="textbox">
        		<input type="number" min='1', max='{{item.percent}}' id="percent_input" onkeyup='getPercent()' name="purchasePercent" >
        		<input type="number" style="display:none" value="{{ item.id }}" name="id"> // 추가
    		</div>
		</div>
	</div>

    <p id='price' style="display:none;">{{item.price}}</p>
    <div class="product-price">
    	<input href="#" type="submit" class="cart-btn" onclick='requestPay()' value ="buy">
    </div>
</form>

 

Fetch

기본적인 fetch로 post를 보내는 방법이다.

let user = {
  name: 'John',
  surname: 'Smith'
};

let response = await fetch('/article/fetch/post/user', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json;charset=utf-8'
  },
  body: JSON.stringify(user)
});

let result = await response.json();
alert(result.message);

 

 

아래는 form을 이용해서 입력받은 정보를 json 데이터 형태로 보내는 방법이다.

const form = document.getElementById('form');

    form.addEventListener('submit', async(e) => {
        e.preventDefault();
        const itemId = window.location.pathname.substring(6);
        let formData = new FormData(form);
        formData.append('itemId', itemId);

        var object = {}
            formData.forEach(function(value,key){
            object[key]=value
        })

        let data = JSON.stringify(object)
        console.log(data)
        const response = await fetch("/item/order", {
            method: "POST",
            headers: {
                'Content-Type': 'application/json'
            },
            body: data
        });
    });

 

 

https://ko.javascript.info/fetch
https://august5pm.tistory.com/8
https://velog.io/@camel-man-ims/React-%EB%8F%99%EB%B9%88%EB%82%98-%EA%B0%95%EC%A2%8C-8