javascript fetch 를 이용한 ajax 통신 및 주의점

fetch 란?

fetch는 ajax()와 비슷하지만 더 사용이 편리합니다.

fetch가 나오기전까진 자바스크립트에서 ajax을 쓰기란 매우 까다롭고 익스플로러랑 기타브라우저가 맞춰저 있지 않다보니 커먼라이브러로 만들어쓰거나 손쉽게 만들어져 있는 제이쿼리를 이용하였습니다.

ajax이 처음 나오던 시절엔 사이트 전체에 극히 일부에서 사용하던 기술이었지만, 현재는 극단적으로 말해 SPA 처럼 ajax의 구성이 대부분인 사이트까지 있습니다.

그러다보니 새로운 표준이 필요했고 ES2015 쯤에 아래와 같이 공식 스펙으로 구현되었습니다.

참고: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

 

장점

• 사용이 간단함
• Promise 객체로 값을 Return 받음
• Response 타입별로 쉽게 적용 가능(JSON, Blob 등등)

 

사용예

일반적으로 아래와 같이 사용합니다.

fetch(url).then(function(response) {
  // Code ...
});

옵션을 줄 수도 있습니다.

fetch(url, {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json'
  }
}).then(function(response) {
  // Code ...
});

아래와 같은 옵션이 있습니다.

method  //  사용할 메소드를 선택 (GET, POST, PUT, DELETE 등등)
headers  //  헤더에 전달할 값
body  // 바디에 전달할 값
mode  //  cors 등의 값을 설정
cache  //  캐쉬 사용 여부

@ headers ['Content-Type']
@ mode ['cors', 'no-cors', 'same-origin']

일반적으로 옵션을 변수에 저장하여 사용합니다.

let optObj = {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json'
  },
  'mode': 'cors'
};
fetch(url, optObj).then(function() {
  ...
});

POST로 보낼 수도 있습니다. ( JSON.stringify()를 써주지 않으면 json이 아닌 객체로 전송되어 에러가 발생합니다. )

fetch(url, {
  method: 'POST',
  body: JSON.stringify({ sitename: 'webisfree' })
}).then(function(response) { ... });

 

비동기 예제

// GET
fetch("/test.json") // (/test.json) 호출 (GET)
	.then(e => e.json()) // 비동기
	.then(e => console.log(e)); // 비동기

// 옵션으로 POST
fetch("/test.json", {
	method: "POST" // (/test.json) 호출 (POST)
}).then(e => e.json()) // 비동기
	.then(e => console.log(e)); // 비동기

 

주의사항

fetch는 기존 자바스크립트이 ajax과 달리 credentials 가 기본값으로 omit 입니다. 즉, 쿠키로 세션 ID를 물고 있는 상태에서 옵션없이 fetch를 쓴다면 해당 세션id를 보내지 않을 것이며, 때문에 세션이 적용되지 않습니다.

// /board/write 통해 글을 쓴다고 가정하고 보낸다.
fetch("/board/write", {
	method: "POST",
	headers: {
		"Content-Type": "application/json; charset=utf-8"
	},
	body: JSON.stringify({title: "제목입니다.", text: "내용입니다."})
}).then(e => e.json()).then(e => {
	// 비 로그인시 글쓰기가 불가하다고 가정하면,
	// 정상적으로 진행할 수 없습니다.
	// 서버에는 로그인이 되지않은상태 (쿠키에 세션아이디가 없는상태) 로 전달 되었을 것입니다.
});

아래처럼 same-origin 옵션으로 해결할 수 있습니다.

• origin 이란 프로토콜 + 도메인 입니다.
• 즉 https://gs.saro.me/dev 가 있다면 https://gs.saro.me 까지 입니다.

// /board/write 통해 글을 쓴다고 가정하고 보낸다.
fetch("/board/write", {
	method: "POST",
	headers: {
		"Content-Type": "application/json; charset=utf-8"
	},
	credentials: "same-origin",
	body: JSON.stringify({title: "제목입니다.", text: "내용입니다."})
}).then(e => e.json()).then(e => {
	// 이제 같은 origin(위 설명참고)에서 동일한 쿠키(세션ID)를 보내도록 조정됩니다.
	// 때문에 로그인 상태가 유지됩니다.
});

 

출처 : https://webisfree.com/2019-05-15/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-fetch-api-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0

출처 : https://gs.saro.me/dev?tn=564