Ajax, Axios, Fetch

1. 비동기 방식이란

자바스크립트의 비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미합니다.

요청과 응답의 순서가 보장되지 않는다.

 

 

 

물론 동기적으로 작업하게 되면 코드 파악이 쉬워지고 유지보수나 디버깅도 쉬워진다.
하지만 싱글스레드 방식의 자바스크립트에서는 동기적 방식을 사용하면 문제가 많아진다.
때문에 자바스크립트에서는 비동기방식으로 작업이 진행되게 된다.

 

 

 

 

JavaScript에서 클라이언트와 서버 간 데이터를 주고받기 위해 비동기 HTTP 통신을 사용한다.
그 예로 Ajax, Axios, fetch 가 있다.

 

 

 

 

 

2. AJAX (Asynchronous Javascript And XML)

ajax 는 어떤 언어나 기술이 아니라, 비동기 방식의 통신 기법을 말한다.

 

• 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 XML 데이터를 교환할 수 있는 통신 기능
• 데이터를 이동하고 화면을 구성하는데 있어서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법

 

 

Ajax 를 통해 서버와 비동기적으로 통신함으로 인해 우리는 전체 웹페이지를 다시 불러오는 동기 방식과는 다르게 점진적으로 해당 부분의 사용자 인터페이지를 갱신할 수 있다...!

 

 

※ 따라서 화면 갱신이 없기 때문에, 사용자 입장에서는 빠르고 편리하게 작업이 처리되는 것처럼 느껴진다.

 

 

 

 

코드로 예를 들자면,

 

 

1. 비동기 처리 사례

 

function getData() {
  var initData;
  $.get('http://domain.com/products/1', function(response) {
    var initData = response;
  });
  return initData;
}
console.log(getData()); // undefined

 

위는 jQuery 를 사용..... (후술)

 

getData( ) 를 찍었지만, undefined 가 출력되었다. 그 이유는 ajax 통신을 하는 부분인 $.get( ) 에서 데이터 요청에 대한 응답을 받기도 이전에 다음 코드인 return initData 를 실행했기 때문이다.

그래서 getData( ) 의 결과값은 초기에 아무것도 설정하지 않은 값인 undefined 가 출력된다.

 

 

 

 

2. 비동기 처리 사례

두번째 비동기처리의 사례로는 web API 의 한 종류인 setTimeout 이 있다.

 

// #1
console.log('Hello');
// #2
setTimeout(function() {
  console.log('Bye');
}, 3000);
// #3
console.log('Hello again');

 

 

장점

• jQuery 를 통해 쉽게 구현이 가능하다.
• error, success, complete 의 상태를 통해 실행 흐름 조절 가능

 

단점

• jQuery 를 사용해야 간편하고 호환성이 보장된다.
• promise 기반이 아니다.

 

 

 

 

이렇게 비동기 방식으로 처리되는 자바스크립트의 특성 때문에 개발자는 의도적으로 예외처리를 해줘야 하는 상황이 발생하곤 한다.

 

앞서 보여주었던 코드들을 예로 들자면, 데이터를 다 받아오기도 전에 비동기적인 코드처리 때문에 데이터를 받아온 것처럼 화면에 표시하려고 하면 오류가 나기 때문이다. 

 

때문에 이런 문제들을 해결하기 위해 콜백(callback) 함수를 사용하게 되었다.

 

↓

 

콜백함수는 자바스크립트의 비동기성을 표현하고 관리하는 가장 일반적인 기법이자 가장 기본적인 비동기 패턴이다
[You don't know Js]

 

 

 

 

콜백 함수는 코드를 통해 명시적으로 호출하는 함수의 개념이 아니다. 

개발자는 단지 함수를 등록하기만 하고, 어떤 이벤트가 발생하거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수를 말한다.

즉, 콜백함수는 어떤 문법적 특징을 가지고 있는 것이 아니라, 호출방식에 의한 구분이다.

 

 

콜백함수가 실행되었다는 것으로 요청한 작업이 끝났음을 알리고, 작업의 결과물은 콜백함수를 통해 사용 가능하게 된다. (가장 대표적인 예로는, 이벤트 핸들러 처리)

 

 

하지만 콜백을 많이 사용하다보니 문제가 있었다.

 

• 순차적 실행이 필요한 경우에 비동기처리를 중첩시켜 표현하기에 에러나 예외 처리가 어려움
• 중첩으로 인한 복잡도가 증가(=콜백지옥)

 

 

이런 단점들을 해결하기 위해 Promise 가 라이브러리로 생겨났고, 이후 ES6 에서는 언어적 차원에서 지원하게 되었다. 

 

 

 

 

 

 

 

 

 

3. Promise 

자바스크립트 비동기를 간편하게 처리할 수 있도록 도와주는 객체(object) 이다. 

Promise 는 정해진 장시간의 기능을 수행한 후, 정상적으로 기능이 수행되었다면 성공의 메세지와 함께 결괏값을 전달하고 문제가 발생할 경우엔 에러를 잘 전달해주게 된다.

 

간단히 말하면,

비동기에서 성공과 실패를 분리해서 메서드를 수행한다.

순차적이지 않는 비동기 함수의 실행순서를 제어할 수 있게 도와주고, 콜백함수에 비해 코드 가독성이 좋고 반환된 결과물을 사용하기 편리한 것이 특징이다. 

 

 

 

 

 

 

 

---

Promise 기반인 Axios, fetch

 

1. Axios

 

Axios is a simple promise based HTTP client for the browser and node.js.
[axios 공식문서]

 

즉, node.js 와 브라우저를 위한 Promise 기반의 HTTP 통신 라이브러리이다.

비동기로 HTTP 통신을 가능하게 해주며 return 을 Promise 객체로 해주기 때문에 response 데이터를 다루기도 쉽다.

리액트를 사용하는 분들이 fetch 보다 Axios 를 선호하는 편이라고 한다. (이유 나중 서술)

 

 

기본적인 사용법은 아래와 같다.

 

 

 

Axios의 post method 구현

 

axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Yongseong',
    lastName: 'Kim'
  }
});

 

 

const axios = require('axios')

// ID로 사용자 요청
axios
  .get('/user?ID=12345')
  // 응답(성공)
  .then(function(response) {
    console.log(response)
  })
  // 응답(실패)
  .catch(function(error) {
    console.log(error)
  })
  // 응답(항상 실행)
  .then(function() {
    // ...
  })

 

 

 

 

 

 

 

 

 

2. Fetch

Fetch 는 ES6 부터 Javascript 의 내장 라이브러리로, 서버로 네트워크 요청을 보내고 응답을 받을 수 있도록 해주는 메서드이다. 

 

promise 기반으로 만들어졌기에 Axios와 마찬가지로 데이터를 다루는데 어렵지 않으며, 내장 라이브러리라는 장점으로 인해 상당히 편리

 

 

 

 

fetch의 post method 구현

 

//fetch
const url ='http://localhost3000/test`
const option ={
   method:'POST',
   header:{
     'Accept':'application/json',
     'Content-Type':'application/json';charset=UTP-8'
  },
  body:JSON.stringify({
  	name:'sewon',
    	age:20
  })

  fetch(url,options)
  	.then(response => console.log(response))

 

 

 

fetch(url, options)
  // 응답(성공)
  .then((response) => console.log("response:", response))
  // 응답(실패)
  .catch((error) => console.log("error:", error));

 

 

 

 

 

3. Axios 와 fetch 비교

 

1. Axios

 

장점

• response timeout (fetch에는 없는 기능) 처리 방법이 존재
• Promise 기반으로 만들어졌기 때문에 데이터 다루기 편리
• 브라우저 호환성이 뛰어남
  

단점

• 사용을 위해 모듈 설치 필요 (npm install axios)

 

 

2. fetch

 

장점

• 자바스크립트의 내장 라이브러리 이므로 별도로 import 할 필요가 없음
• Promise 기반으로 만들어졌기 때문에 데이터 다루기 편리
• 내장 라이브러리이기 때문에 업데이트에 따른 에러 방지가 가능
  
  

단점

• 지원하지 않는 브라우저가 존재 (IE11...)
• 네트워크 에러 발생 시 response timeout이 없어 기다려야 함
• JSON으로 변환해주는 과정 필요
• 상대적으로 axios에 비해 기능이 부족

 

 

 

 

 

 

 

퍼온 글...

 

일단 웹 프론트 프레임워크(react js,vue js 등)을 다룰때에는 Axios를 사용하는 것이 더 좋다고 생각합니다. Axios는 크로스 브라우징에 신경을 많이 쓴 모듈인게 눈에 보이며, 기능또한 우수하기 때문이죠.
전체적으로 제가 봤을 때 fetch의 상위 호환이라고 생각을 합니다.
✋ 다만, react-native에서는 fetch를 사용하는 것이 아주 조금 더 좋다고 생각합니다. react-native의 경우 아직 안정화 된 프레임워크가 아니기에 지속적인 version update가 진행되고 있고, axios에서 이를 반영하지 못할 경우 생각지 못한 에러가 발생할 수 있다는 우려 때문입니다.

이론적인 결론은 이렇지만 Ajax 툴은 가급적 모두 다 사용해보시는 것을 추천드립니다. 러닝 커브가 전혀 존재하지 않을 정도로 fetch와 Axios의 코드 차이가 미미하기도 하고 사실 크게 부담느낄정도로 장단점이 극명하지도 않기 때문이죠.

 

 

 

 

 

 

 

 

 

개인 정리

 

ajax 는 자바스크립트에서 데이터를 비동기적으로 통신하는 방법이다. 이것을 동기적으로 처리하기 위해서는 콜백함수를 사용했다. 하지만 콜백 지옥이라는 단점이 있다.

이후 promise 라는 객체가 등장하였다. promise 객체는 axios, fetch 를 모두 지원한다. 둘의 차이점은 fetch 는 내장 라이브러리라는 점이고 axios 는 npm install 과 import 해야 사용할 수 있다. 하지만 호환성 때문에 리액트에서는 axios 를 많이 쓰는 추세이다..!

 

 

 

 

 

 

 

출처

https://cocoon1787.tistory.com/756 https://velog.io/@eassy/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%9D%98-%EB%B9%84%EB%8F%99%EA%B8%B0%EC%B2%98%EB%A6%AC