fetch & async/await & axios

- 지난번 스터디에서 슬쩍 나온 토픽이었던 주제

이전에는 axios위주로 활용해왔어서 비교해보고자 chatGPT에게 물어봤다.

 

---

 

 

`fetch`, `async/await`, 그리고 `axios`는 모두 JavaScript에서 HTTP 요청을 보내는 데 사용됩니다. 각 방식의 특징과 장단점을 다음과 같이 설명할 수 있습니다.

### fetch
#### 특징
- `fetch`는 브라우저에서 내장된 API로, 네트워크 요청을 보내고 응답을 처리할 수 있습니다.
- Promise 기반 API로, 체이닝을 통해 비동기 작업을 관리할 수 있습니다.

#### 장점
- **내장 API**: 별도의 라이브러리 설치 없이 사용할 수 있습니다.
- **모던 API**: 최신 표준을 따르며, Promise 기반으로 비동기 처리에 익숙한 개발자에게 친숙합니다.

#### 단점
- **구형 브라우저 지원 부족**: 일부 오래된 브라우저에서는 지원되지 않습니다.
- **에러 핸들링**: `fetch`는 HTTP 오류 상태를 자동으로 처리하지 않으므로, 수동으로 처리해야 합니다.
- **기본 기능 부족**: JSON 변환이나 타임아웃 같은 기능이 기본적으로 제공되지 않습니다.

#### 예시
```javascript
fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('There has been a problem with your fetch operation:', error));
```

### async/await
#### 특징
- `async/await`는 ES2017(ES8)에서 도입된 비동기 코드를 작성하기 위한 문법입니다.
- 비동기 함수를 동기 함수처럼 작성할 수 있게 해주어 코드의 가독성을 높여줍니다.

#### 장점
- **가독성**: 동기식 코드처럼 작성할 수 있어 가독성이 좋습니다.
- **에러 핸들링**: `try/catch` 블록을 사용하여 에러를 직관적으로 처리할 수 있습니다.

#### 단점
- **구형 브라우저 지원 부족**: 일부 오래된 브라우저에서는 지원되지 않습니다.
- **비동기 함수 내부에서만 사용 가능**: `await`는 `async` 함수 내부에서만 사용할 수 있습니다.

#### 예시
```javascript
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('There has been a problem with your fetch operation:', error);
  }
}

fetchData();
```

### axios
#### 특징
- `axios`는 Promise 기반 HTTP 클라이언트로, 브라우저와 Node.js 환경 모두에서 사용할 수 있습니다.
- 설정 및 사용이 간편하며, 다양한 기능(예: 인터셉터, 취소 토큰, JSON 자동 변환 등)을 제공합니다.

#### 장점
- **간편한 설정 및 사용**: 직관적이고 간단한 API로 사용이 쉽습니다.
- **풍부한 기능**: JSON 변환, 요청 및 응답 인터셉터, 타임아웃 설정 등 다양한 기능을 제공합니다.
- **광범위한 브라우저 지원**: 구형 브라우저에서도 잘 작동합니다.
- **Node.js 지원**: 서버 사이드에서도 사용할 수 있습니다.

#### 단점
- **패키지 설치 필요**: 외부 라이브러리를 설치해야 합니다.
- **추가 의존성**: 프로젝트에 또 다른 의존성을 추가하게 됩니다.

#### 예시
```javascript
import axios from 'axios';

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('There has been a problem with your axios operation:', error);
  });
```

### 종합 비교
| 특성 | fetch | async/await | axios |
|---|---|---|---|
| 기본 제공 여부 | 브라우저 내장 | ES2017 표준 | 외부 라이브러리 |
| 에러 핸들링 | 수동 처리 필요 | try/catch 사용 | 자동으로 상태 코드 처리 |
| 기능 | 기본 기능 | 동기식 코드 스타일 | 풍부한 기능 제공 |
| 지원 환경 | 최신 브라우저 | 최신 브라우저 | 브라우저 및 Node.js |
| 설정 및 사용 | 약간 복잡 | 간단 | 매우 간단 |

이 정보를 바탕으로 프로젝트의 요구사항과 환경에 맞는 방식을 선택하면 됩니다.