[AJAX] Client에서 Request를 전송하고 응답을 처리하는 시나리오

Get

🔸

jsx —→ fetch API 사용 fetch([URL]).then((response) => response.json()) .then((data) => console.log(data));

fetch([URL]) - URL 외 인자가 없으면 자동으로 Get 방식 사용해서 요청 전송- fetch 함수의 리턴 타입은 Promise 타입 객체

then((response) => response.json()) - then 함수를 통해 fetch 함수(Promise)가 성공적으로 처리되었을 때의 응답(resolve)을 받아오면 HTTP Request에 대한 결과를 담고 있는 Response 객체를 얻을 수 있음

then((data) => console.log(data)); - json()함수도 Promise 타입 객체를 반환하기 때문에 then 함수를 이용해서 resolve 해주는 json 형식의 데이터만 받아올 수 있음 - 받아온 json 객체를 console에 표시하거나, DOM에 뿌리는 등 적절하게 처리하면 됨!

 

Client에서 Request를 전송하고 응답을 처리하는 시나리오 정리

 

• GET

  .then((response) => response.json()) 
  // json 객체로 만들어진 데이터가 data에 담김 
  // data를 출력, 또는 필요한 데이터를 적절하게 활용하기 
  .then((data) => console.log(data));
  // fetch API 사용fetch([URL]) 
  // URL 외 인자가 없으면 자동으로 Get 방식 사용해서 요청 전송
  // response는 promise 객체임
  // 서버로부터 받은 필요한 데이터만 얻기 위해서 json() 함수 사용
  // json 형태로 데이터를 받아옴

• POST

  // fetch API 사용
  let option = {// 요청에 사용할 http method 명시
  	method: "POST", // 요청에 필요한 
  	headerheaders: { // 요청과 함께 전송할 데이터가 json 형태임을 알림
  		"Content-Type": "application/json", 
  	},
  	// 요청과 함께 전송할 데이터를 직렬화 (stringify, serialize) 
  	body: JSON.stringify(obj) 
  }