Fetch() 대 Axios

이전에 JS에서 간단한 fetch() 요청을 수행하는 방법에 대해 쓴 적이 있습니다. Ruby로 이동하면서 훨씬 더 적은 코드와 더 짧은 시간에 가져오기 요청을 생성하는 이 재미있는 방법을 지나친 것 같았습니다. 게으르지 않다면 프로그래머란 무엇입니까? 타이핑을 더 빠르고 쉽고 깔끔하게 하기 위해 항상 다음 사용 가능한 해킹을 검색합니다.

Axios는 간단한npm install axios 작업을 위해 선택한 구성 요소에 가져오기를 추가하고 viola! 브라우저용 약속 기반 HTTP 클라이언트에 액세스할 수 있습니다.

기본 구문부터 시작하여 둘 사이의 차이점을 살펴보겠습니다. 먼저 Axios는 데이터 속성을 사용하는 엔드포인트로 데이터를 보내기 위해 본문 속성을 가질 필요가 없기 때문에 사후 요청에 대해 더 적은 코드 라인이 필요합니다. 구문에서 다른 점은 Axios가 JSON.stringify 메소드가 필요하지 않다는 점입니다. 간단한 헤더만 있으면 되지만 서버에서 반환되는 데이터를 JSON으로 변환하는 데이터를 자동으로 변환하기 때문입니다. fetch() 를 사용하면 response.json 메서드를 호출하여 데이터를 JS 객체로 구문 분석해야 합니다.

const url = "http://url.com"
const data = { name: Tom, age: 20}

axios.post(url, data, { 
headers: {"Content-Type" :"application/json"} 
})
.then(res => console.log(res.data)

VS

const url = "http://url.com"
fetch(url, {
method: "POST"
headers: { "Content-Type" :"application/json"
},
body: JSON.stringify ({
name: "Tom",
age: "20"
})
})
.then(res => res.json())
.then(data => console.log(data))

Axios가 다른 또 다른 점은 앞서 언급한 서버로 데이터를 다시 보낼 때 자동으로 발생하는 기본 동작을 재정의하는 방법입니다. 발생하는 변환을 실제로 재정의할 수 있지만 fetch() 를 사용하면 수동으로 수행해야 합니다. get 요청으로 이것이 어떻게 수행되는지 봅시다.

axios.get("http://url.com")
.then(res => console.log(res.data)
error => {
console.log(error)

대

fetch("http://url.com")
.then(res => res.json())
.then(data => console.log(data))
.catch(error => console.error(error))

fetch()가 포함된 추가 코드 라인이 하나 더 있지만 Axios가 이를 수행할 수 있을 때 가져오기 요청에서 데이터를 JSON으로 변환할 필요가 없다는 것이 좋습니다. 그러나 동일한 방식으로 데이터를 가져오고 구문 분석할 수 있습니다.

또 다른 흥미로운 점은 이전 버전과의 호환성입니다. Axios는 IE11과 같은 이전 브라우저를 포함하여 다양한 브라우저에서 거의 문제 없이 쉽게 실행할 수 있도록 내부적으로 실행XMLHttpRequest하기 때문에 이 측면에서 꽤 인기가 있습니다. 반면에 fetch()는 현재 현재 버전의 Chrome, Firefox, Edge 및 Safari에서만 지원되며 이 긴 목록이 광범위하지 않다는 의미는 아닙니다. 그러나 this이 수행 방법을 설명하는 fetch()에 대한 폴리필을 구현해야 하지만 Axios는 추가 작업 없이 이미 작업을 수행할 수 있는 반면 이전 브라우저에서 단순히 가져오기를 허용하는 추가 단계를 추가할 수 있습니다. 보다? 우리는 게으르다..

위의 예제는 동일한 기능을 구현하므로 사용할 것을 결정하는 것은 개인 취향이며 프로젝트에 가장 적합한 것은 개발자에게 달려 있습니다. 특히 fetch() 와 비교할 때 Faraz Kelhini가 읽을 수 있는here Axios가 삶을 조금 더 쉽게 만드는 방법에 대한 정말 좋은 예가 많이 있습니다.

자원:
Axios Documentation