ajax, fetch, xhr 비동기통신 이해하기

form 태그_비동기 통신이 나오기전 서버 통신

기존의 웹 애플리케이션은 브라우저에서 폼을 채우고 이를 웹 서버로 제출(submit)을 하면 하나의 요청으로 웹 서버는 요청된 내용에 따라서 데이터를 가공하여 새로운 웹 페이지 를 작성하고 응답으로 되돌려준다.

◼️ GET request

<form action="/name-get" method="get">
  <!-- 데이터들은 querystring으로 넘어간다 -->
  first name: <input type="text" name="firstname" /><br />
  last name: <input type="text" name="lastname" /><br />
  <input type="submit" />
</form>

◼️ POST request

<form action="/name-post" method="post">
  first name: <input type="text" name="firstname" /><br />
  last name: <input type="text" name="lastname" /><br />
  <input type="submit" />
</form>

form태그로 데이터를 주고 받는게 가능했지만, 서버는 새로운페이지를 다시 보내줬다.

XHR

기존에 form태그를 사용하여 서버에 데이터를 받는것은 너무 많은 데이터가 올뿐 아니라 페이지를 새로 받는 불필요함이 있었다.

하지만 XMLHttpRequest(XHR)이 나오면서 필요한 부분만 서버에 요청하고 해당하는 내용만 받는것이 가능해졌다. 이렇게되면 대역폭의 낭비를 줄이고 필요한부분만 요청하기에 상호작용을 할 수 있게됐다.

AJAX

XHR을 사용하여 비동기처리를 하는 기술 AJAX(Asynchronous Javascript And XML)
이 나타났다.

◼️ AJAX POST request

const xhr = new XMLHttpRequest();

xhr.open("post", url);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(JSON.stringify(data));

xhr.onreadystatechange = () => {
  if (xhr.readyState === xhr.DONE) {
    if (xhr.status === 200) {
      console.log(xhr.responseText);
    }
  }
};

◼️ AJAX GET request

const xhr = new XMLHttpRequest();

xhr.open("get", `${url}?${querystring}`);
xhr.send();

xhr.onreadystatechange = () => {
  if (xhr.readyState === xhr.DONE) {
    if (xhr.status === 200) {
      console.log(xhr.responseText);
    }
  }
};

자바스크립트에서 AJAX를 사용하여 비동기처리 통신을하기엔 매우 복잡했다. 그래서 jQuery에서 AJAX를 간단하게 사용하기 위해 ajax()를 만들었다.

하지만 ES6에서 fetch가 나오면서 ajax()사용이 줄어들게 된다.

fetch

fetch는 axios와 달리 브라우저에 내장돼있어 라이브러리를 사용하지 비동기통신을 할 수있다.

fetch() 함수는 첫번째 인자로 URL, 두번째 인자로 옵션 객체를 받고, Promise 타입의 객체를 반환한다. 반환된 객체는, API 호출이 성공했을 경우에는 응답(response) 객체를 resolve하고, 실패했을 경우에는 예외(error) 객체를 reject합니다.

fetch(url, options)
  .then((response) => console.log("response:", response))
  .catch((error) => console.log("error:", error))

옵션(options) 객체에는 HTTP 방식(method), HTTP 요청 헤더(headers), HTTP 요청 전문(body) 등을 설정해줄 수 있다. headers에는 요청헤더를 설정할 수 있고 body는 본문내용을 설정한다.
fetch는 get방식의 통신이 디폴트로 작동하고있어 따로 작성해주지 않아도 된다. get방식은 데이터를 가져올때 쓰는 방식이다.

post방식은 서버에 데이터를 생성한다면 데이터 요청전문을 포함한다. put,delete방식은 데이터 수정, 삭제를하기위해서 사용한다.

fetch("https://3000.typicode.com/posts", {
 method: "POST",
 headers: {
   "Content-Type": "application/json", //json전송한다는 뜻
 },
 body: JSON.stringify({ 
   title: "Test",
   body: "I am testing!",
   userId: 1,
 }),
})
 .then((response) => response.json())
 .then((data) => console.log(data))

JSON.stringify은 객체를 JSON문자열로 변환한다.
{a:1} >>> "{a:1}"
response.json()은 응답을 JSON 형태로 파싱한다.

❌Promise 타입❌

콜백지옥(비동기 연산)을 해결하기 위해 promise를 사용하기도 하지만 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용한다.

const promise = new Promise((resolve, reject) => {
  console.log("start");
  setTimeout(() => {
    resolve("foo"); // value 출력(성공)
    // reject(new Error("no network")); //  에러 출력
  }, 2000);
});

promise
  .then(value => {
    console.log(value);
  })//프로미스가 대신 이행된 경우 출력

  .catch(error => {
    console.log(error);
  })//프로미스가 처리되지 않은 경우 출력

  .finally(() => {
    console.log("finally");
  });// 모든 통신이 끝난후 출력

.then은 순서대로 실행되면 실행된값을 다음 .then에서 value로 값을 받아 실행한다.

프로미스가 성공했을 때 start > foo > finally 로 출력된다.
프로미스가 실패했을 때 start > error()[콘솔창에 에러메세지] > finally 로 출력된다.

Axios

Axios는 브라우저,node.js에서 사용가능한 프로미스 api를 활용하는 비동기통신 라이브러리다. fetch와는 다르게 라이브러라서 install해야 사용가능하다. 또, 별도의 import를 해야 사용가능하다. Axios는 모든 브라우저에서 사용가능하며 응답시간 설정을 지원하고 json자동 변환이 지원된다.

Axios install

yarn add axios

npm install axios

패키지매니저에 추가한다.

예제

◼️ get

import axios from 'axios';

axios.get('https://my-json-server')
	.then((Response)=>{
   	 console.log(Response.data);
	})
	.catch((Error)=>{
	    console.log(Error);
	})

◼️ post

axios.post('https://test.com/', {
  params: {
    foo: 'bar'
  }
});

참고:
https://www.daleseo.com/js-window-fetch/
https://ko.javascript.info/fetch