Fetch & Axios

fetch / Axios

Promise

• Promise는 JavaScipt의 비동기 처리에 사용되는 객체로써 비동기로 처리되는 결과를 동기처럼 반환한다.
  실제로 동기처럼 처리되는 것이 아닌, 미래의 데이터 처리가 완료된 시점에 결과를 제공하겠다는 '약속(프로미스)'를 반환한다.

Promise 객체를 사용하는 이유

• JavaScript에는 동기 작업과 비동기 작업이 있는데, 비동기로 처리되는 작업의 결과를 사용하기 위해 Promise 객체를 사용한다. 비동기 작업이 끝난 후의 결과를 이용해서 작업을 수행하려면 Promise 객체의 콜백함수로 작업을 지정해줘야 한다.
  그레야 순서를 보장받을 수 있다. 이러한 콜백함수가 너무 많아지면, 수정이 복잡해지고 코드의 가독성이 떨어지게 되는데, 이를 '콜백지옥' 이라고 한다. 콜백지옥을 방지하기 위해서 then()을 이어붙여 콜백함수 작업을 처리할 수 있도록 만들 수 있다.

Fetch

• Fetch는 JavaScript 내장 API로 비동기 통신 네트워크를 가능하게 하는 기술이다. 비교적 최근에 나온 기술로, XMLHttpRequest보다 훨씬 간단하고 보기에도 간결하다. jQuery.ajax()와도 비슷하지만 요즘 jQuery를 잘 안 쓰는 추세이므로, Fetch가 훨씬 많이 쓰이는 것 같다.
  Promise예제처럼 new Promise 객체를 만들기보다 아래 예제와 같이 fetch 함수는 url로 요청을 보낸 결과로 Promise 객체를 반환한다.

Fetch 예제

Fetch 예제
fetch('데이터url')
  .then(response => {
    return response.json()
  })
  .then(data => {
    console.log(data)
  })
  .catch(err => {
    console.log(err)
  })

Fetch의 특징

• Fetch로 반환되는 Promise 객체는 error를 reject하지 않는다. 대신 ok상태가 false인 resolve가 반환된다. 그러므로 reject를 이용하지 않고, 별도로 에러처리를 해주어야 한다.
• Fetch는 쿠키를 보내거나 받지 않는다. 쿠키를 전송하기 위해서는 자격증명(credentials) 옵션을 설정해주어야 한다.

async & await

• async와 await은 비동기 처리 API 중에 가장 최근에 도입된 문법으로 기존의 불편함을 보완하기 위해 나온 편리한 구문이다. async와 await을 사용하는 이유를 알기 위해 다음의 코드를 보자.

async, await을 사용하지 않으면 fetch는 비동기로 동작하기 때문에 콘솔창의 결과는 장담할 수 없다. 콜백함수로 처리해야만 결과를 보장받을 수 있다. 이의 단점을 보완하기 위해 등장한 것이 async, await이다.

async & await 예제

async function callAsync() {
    const data = await fetch('데이터url');

    if(data.id === 1) {
      console.log(data.name);
    }
  }

async라고 비동기 함수를 선언해주고, 비동기 작업에 await을 붙여주면 그 뒤에 이 결과를 사용하는 작업에서 동기처럼 처리가 된다. 즉 비동기 작업이 이루어진 후에 그 결과로 작업이 수행된다.

async & await 예외처리

• Promise 객체의 예외처리는 메소드 체이닝 catch() 메소드를 이어붙이면 됐었다. 그러나 async, await은 그렇게 예외처리를 할 수가 없다. 대신 try, catch 구문을 이용해서 한다.

async & await 예외처리 예제

async function callAsync() {
    try{
      const data = await fetch('데이터url');

      if(data.id === 1) {
        console.log(data.name);
      }
    } catch (err) {
      console.log(err)
    }
  }

---

Fetch와 Axios 차이점

자바스크립트에서 HTTP Requests를 위한 방법이 두가지가 존재.

Fetch

ES6부터 들어온 JavaScript 내장 라이브러리
Promise 기반으로 만들어졌기 때문에 axios와 마찬가지로 데이터 다루기가 쉽고, 내장 라이브러리라는 장점으로 상당히 편리

fetch("https://localhost:3000/user/post", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    id: "asd123",
    description: "hello world",
  }),
}).then((response) => console.log(response));
 

Fetch의 장점

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

Fetch의 단점

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

---

Axios

axios는 Node.js와 브라우저를 위한 Promise API를 활용하는 HTTP 통신 라이브러리이다. 비동기로 HTTP 통신을 할 수 있으며 return을 promise 객체로 해주기 때문에 response 데이터를 다루기 쉽다.

axios({
  method: 'post',
  url: 'https://localhost:3000/user',
  data: {
    userName: 'Cocoon',
    userId: 'co1234'
  }
}).then((response) => console.log(response));
 

Axios 장점

1. response timeout(fetch에는 없는 기능) 처리 방법이 존재
2. Promise 기반으로 만들어졌기 때문에 데이터 다루기 편리
3. 크로스 브라우징 최적화로 브라우저 호환성(구형브라우저지원)이 뛰어남

Axios 단점

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