fetch 정리 및 활용

fetch

Ajax와 같은 서버와 클라이언트 소통 도구

사용법

fetch(경로, 객체)
.then(응답을 담는 변수 //함수사용 가능)
.then(then의 반환값 담는 변수 // 함수 사용 가능)

객체 요소{
method : value // 전송 방법
headers: {value}
// headers는 value를 객체로 받는다. Content-type 말고도
// 다른 옵션이 더 있어서 그렇다.
body: value // 전송할 데이터
}

반환값

fetch의 반환값은 Promise라는 객체
then은 Promise 객체의 메서드
첫번째 then의 반환값도 Promise 객체다.

Promise

JS에서 비동기 작업을 할 때 사용되는 객체
비동기 작업은 주로 네트워크 요청, 읽기/쓰기, 타이머 관련 작업이다.

promise 내부 구성

적용 코드

function transData(e) {
  let unit = $(e.target).attr("data-dateUnit");
  let value = $(e.target).attr("data-dateValue");

  fetch("../sale", {
      method: "POST",
      headers: {
        "Content-type": "application/x-www-form-urlencoded"
      },
      body: "dateUnit=" + unit + "&dateValue=" + value
  })
	.then(response => response.json())
	.then(jo => {
        console.log("jo :", jo);

        let dataMap = new Map();
        dataMap.set("saleList", jo.saleList);
        dataMap.set("refundList", jo.refundList);

        let sale = dataMap.get("saleList");
        let refund = dataMap.get("refundList");

        console.log(sale);
        console.log(refund);

        let saleSpan = $(".sale").find("span");
        let refundSpan = $(".refund").find("span");

        saleSpan.each(function(index, item) {
          $(item).text(sale[index]);
        });
        refundSpan.each(function(index, item) {
          $(item).text(refund[index]);
	  });
	})
	.catch(error => {
        console.log(error);
	});