포르투갈어 버전

Axios와 Fetch는 JavaScript에서 HTTP 요청을 만드는 데 널리 사용되는 도구이지만 몇 가지 중요한 차이점이 있습니다. 요약은 다음과 같습니다.

액시오스

• 내장 기능: Axios에는 자동 JSON 변환, 요청 및 응답 인터셉터, 요청 취소 등 다양한 기능이 내장되어 있습니다.
• 브라우저 호환성: Internet Explorer를 포함한 이전 브라우저를 지원합니다.
• 오류 처리: Axios는 HTTP 오류 상태(예: 404 또는 500)에 대한 약속을 자동으로 거부하여 오류 처리를 더 쉽게 만듭니다.
• 요청/응답 인터셉터: 간단한 방법으로 전역적으로 요청이나 응답을 수정할 수 있습니다.
• 취소 요청: Axios는 요청을 취소하는 쉬운 방법을 제공합니다.

술책

• 네이티브 API: Fetch는 네이티브 웹 API이므로 추가 라이브러리를 설치할 필요가 없습니다.
• Promise-Based: Promise를 사용하지만 오류에 대한 응답 상태를 수동으로 확인해야 합니다.
• 스트림 처리: 가져오기는 스트리밍을 지원하므로 대규모 응답을 처리하는 데 유용할 수 있습니다.
• 추가 제어: 요청에 대해 더 많은 제어 기능을 제공하지만 패턴 설정이나 요청 가로채기와 같은 기능을 위해서는 더 많은 추가 코드가 필요합니다.
• JSON에 대한 기본 지원 없음: JSON 데이터를 구문 분석하려면 응답 개체에서 .json()을 호출해야 합니다.

사용 사례

• 특히 복잡한 애플리케이션에 즉시 사용 가능한 풍부한 기능 세트가 필요한 경우 Axios를 사용하세요.
• 가져오기를 사용하여 더 간단한 사용 사례를 사용하거나 외부 종속성을 피하고 싶을 때 사용하세요.

사용예

액시오스:

axios.get('/api/data')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

const options = {
  url: 'http://localhost/test.htm',
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json;charset=UTF-8'
  },
  data: {
    a: 10,
    b: 20
  }
};
axios(options)
  .then(response => {
    console.log(response.status);
  });

술책:

fetch('/api/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(error));

const url = "https://jsonplaceholder.typicode.com/todos";
const options = {
  method: "POST",
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json;charset=UTF-8",
  },
  body: JSON.stringify({
    a: 10,
    b: 20,
  }),
};
fetch(url, options)
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
  });

참고:

• 데이터를 보내기 위해 fetch()는 POST 요청에 body 속성을 사용하는 반면 Axios는 data 속성을 사용합니다.
• fetch()의 데이터는 JSON.stringify 메서드를 사용하여 문자열로 변환됩니다.
• Axios는 서버에서 반환된 데이터를 자동으로 변환하지만 fetch()를 사용하면 response.json() 메서드를 호출하여 데이터를 JavaScript 객체로 구문 분석해야 합니다.
• Axios를 사용하면 서버에서 제공하는 데이터 응답을 데이터 객체 내에서 액세스할 수 있는 반면, fetch() 메서드에서는 최종 데이터의 이름을 임의의 변수로 지정할 수 있습니다.

결론

두 가지 모두 장점이 있으며, 선택은 종종 귀하의 특정한 필요와 선호도에 따라 달라집니다. API 상호 작용이 많은 대규모 애플리케이션을 구축하는 경우 Axios를 사용하면 일부 작업을 더 쉽게 할 수 있고 Fetch는 간단한 작업에 적합합니다.

Axios는 대부분의 HTTP 통신 작업을 단순화하는 사용자 친화적인 API를 제공합니다. 그러나 기본 브라우저 기능을 선호한다면 Fetch API를 사용하여 유사한 기능을 직접 구현할 수 있습니다.

우리가 살펴본 것처럼 브라우저에서 사용할 수 있는 fetch() 메소드를 사용하여 Axios의 핵심 기능을 복제하는 것이 전적으로 가능합니다. 클라이언트 HTTP 라이브러리를 포함하기로 한 결정은 궁극적으로 네이티브 API에 대한 편안함과 프로젝트의 특정 요구 사항에 따라 달라집니다.

자세한 정보: https://medium.com/trainingcenter/axios-ou-fetch-765e5db9dd59