Javascript에서 Axios와 Fetch의 차이점-JS 튜토리얼-php.cn

Javascript에서 Axios와 Fetch의 차이점

Patricia Arquette

풀어 주다： 2024-09-25 06:16:32

원래의

814명이 탐색했습니다.

Difference Between Axios & Fetch in Javascript

JavaScript에서는 Axios와 기본 Fetch API 모두 HTTP 요청을 만드는 데 사용되지만 기능, 사용 편의성, 기능성 측면에서 약간의 차이가 있습니다. 분석 내용은 다음과 같습니다.

액시오스:

Axios는 요청 생성 및 응답 처리를 단순화합니다. JSON 응답을 자동으로 구문 분석하므로 작업이 더 쉬워집니다.
```
 axios.get('/api/user')
   .then(response => console.log(response.data))
   .catch(error => console.error(error));
```
로그인 후 복사
가져오기:

가져오기를 사용하면 추가 단계를 추가하는 JSON 구문 분석을 명시적으로 처리해야 합니다.
```
 fetch('/api/user')
   .then(response => response.json())
   .then(data => console.log(data))
   .catch(error => console.error(error));
```
로그인 후 복사

액시오스: Axios는 응답 상태가 2xx 범위를 벗어나면 자동으로 응답을 해결하고 오류를 발생시키므로 .catch() 블록에서 오류를 직접 처리할 수 있습니다.
가져오기:

가져오기를 사용하면 2xx가 아닌 상태 코드(예: 404 또는 500)는 오류로 처리되지 않습니다. 수동으로 응답 상태를 확인하고 필요한 경우 오류를 발생시켜야 합니다.
```
 fetch('/api/user')
   .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(error));
```
로그인 후 복사

액시오스:

Axios는 내장된 인터셉터를 제공하여 요청을 수정하거나 전역적으로 응답을 처리할 수 있도록 하며, 이는 인증 토큰 추가, 로깅 등에 유용할 수 있습니다.
```
 axios.interceptors.request.use(config => {
   config.headers['Authorization'] = 'Bearer token';
   return config;
 });
```
로그인 후 복사
가져오기:

Fetch에는 기본 제공 인터셉터가 없으므로 이 동작이 필요한 경우 사용자 지정 함수에서 가져오기 호출을 수동으로 래핑해야 합니다.

액시오스: Axios는 이전 브라우저(IE 11 이하)에서 작동하며 내부적으로 폴리필을 처리합니다.
가져오기: Fetch API는 Internet Explorer에서 지원되지 않습니다. 이전 브라우저에서 이를 지원하려면 whatwg-fetch와 같은 폴리필이 필요할 수 있습니다.

액시오스:

Axios는 POST 요청 시 자동으로 데이터를 문자열화하고 Content-Type을 application/json으로 설정합니다. 또한 FormData와 같은 다른 형식의 데이터 전송도 쉽게 지원합니다.
```
 axios.post('/api/user', { name: 'John' });
```
로그인 후 복사
가져오기:

가져오기에서는 데이터를 수동으로 문자열화하고 POST 요청에 대한 헤더를 설정해야 합니다.
```
 fetch('/api/user', {
   method: 'POST',
   headers: { 'Content-Type': 'application/json' },
   body: JSON.stringify({ name: 'John' })
 });
```
로그인 후 복사

액시오스:

Axios에는 CancelToken을 사용하여 요청을 취소하는 기능이 내장되어 있습니다.

 const source = axios.CancelToken.source();
 axios.get('/api/user', { cancelToken: source.token });
 source.cancel('Request canceled.');

로그인 후 복사

가져오기:

가져오기를 사용하면 AbortController를 사용하여 요청을 취소해야 하는데 이는 좀 더 복잡할 수 있습니다.
```
 const controller = new AbortController();
 fetch('/api/user', { signal: controller.signal });
 controller.abort();
```
로그인 후 복사