Fetch 대 Axios 소개
프론트 엔드 개발의 가장 중요한 부분 중 하나는 HTTP 요청을 만들어 백엔드와 통신하는 것입니다. 자바 스크립트에서 비동기적으로 API를 호출하는 방법에는 몇 가지가 있습니다.
몇 년 전, 대부분의 애플리케이션은 Ajax (Asynchronous Javascript and XML)를 사용하여 HTTP 요청을 전송했습니다. 하지만 지금은 개발자들이 주로 fetch() API와 Axios 중에서 선택을 결정합니다.
이 기사에서는 두 가지 방법을 비교하고 기본 개요와 구문을 살펴 보겠습니다. 그 외에도 두 경우 모두 데이터를 JSON 형식으로 변환하는 과정과 오류 처리도 비교해 보겠습니다. HTTP 가로 채기와 다운로드 진행 상황에 대해서도 이야기하겠습니다.
개요 및 구문 가져 오기
Javascript 프로젝트를 빌드 할 때 창 개체를 사용할 수 있으며 프로젝트에서 사용할 수 있는 많은 훌륭한 메서드가 함께 제공됩니다. 이러한 기능 중 하나는 API에서 데이터를 비동기적으로 가져 오는 논리 솔루션인 간편한 글로벌 .fetch() 메서드를 제공하는 Fetch API입니다.
.fetch() 메서드의 구문을 살펴 보겠습니다.
fetch(url)
.then((res) =>
// handle response
)
.catch((error) => {
// handle error
})위의 예에서 간단한 가져 오기 GET 요청의 구문을 볼 수 있습니다. .fetch() 메서드에는 필수 인수 URL이 하나 있습니다. Response 객체로 해결할 수 있는 Promise를 반환합니다.
.fetch() 메서드의 두 번째 인수는 옵션이며 선택 사항입니다. 옵션을 전달하지 않는 경우 요청은 항상 GET이며 지정된 URL에서 콘텐츠를 다운로드합니다.
options 매개 변수 내에서 메서드나 헤더를 전달할 수 있으므로 POST 메서드나 다른 것을 사용하려면 이 선택적 배열을 사용해야 합니다.
앞서 언급 했듯이 Promise는 Response 객체를 반환하므로 응답 본문을 가져 오기 위해 다른 메서드를 사용해야 합니다. 필요한 본문의 형식에 따라 사용할 수 있는 몇 가지 방법이 있습니다.
선택적 매개 변수가 있는 코드 예제를 살펴 보겠습니다.
fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
});
.then((response) => response.json())
.catch((error) => console.log(error))위의 코드 예제에서 메서드, 헤더 및 본문 매개 변수가 있는 간단한 POST 요청을 볼 수 있습니다. 그런 다음 json() 메서드를 사용하여 응답을 JSON 형식으로 변환합니다.
이제 axios를 자세히 살펴 보겠습니다.
Axios 개요 및 구문
Axios는 Node.js, XMLHttpRequests 또는 브라우저에서 HTTP 요청을 만들기 위한 자바 스크립트 라이브러리입니다. 최신 라이브러리로서 Promise API를 기반으로 합니다.
axios에는 XSRF에 대한 보호 또는 요청 취소와 같은 몇 가지 장점이 있습니다.
axios 라이브러리를 사용하려면 이를 설치하고 프로젝트로 가져와야 합니다. axios는 CDN, npm 또는 bower를 사용하여 설치할 수 있습니다. 이제 간단한 GET 메서드의 구문을 살펴 보겠습니다.
axios.get(url)
.then(response => console.log(response));
.catch((error) => console.log(error));위의 코드에서 .ge () 메서드를 사용하여 axios를 사용하여 간단한 GET 요청을 만드는 방법을 볼 수 있습니다. 함수에서 POST 메소드를 사용하려면 대신 .post() 메소드를 사용하고 요청 데이터를 매개 변수로 전달하면 됩니다.
구성 개체를 만들 때 여러 속성을 정의 할 수 있습니다. 가장 일반적인 것은 다음과 같습니다.
응답으로 axios는 응답 객체 또는 오류 객체로 해결할 promise를 반환합니다. 응답 개체에는 다음 값이 있습니다.
지금부터 데이터가 있는 POST 메서드를 사용한 코드 예제를 살펴 보겠습니다.
axios.post({
'/url',
{ name: 'John', age: 22},
{ options }
})위의 코드에서 URL, 데이터 및 추가 옵션과 함께 config 개체를 매개 변수로 넣는 post 메서드를 볼 수 있습니다.
또한 config 개체를 변수로 정의하고 아래 예제와 같이 axios에 전달할 수도 있습니다.
const config = {
url: 'http://api.com',
method: 'POST',
header: {
'Content-Type': 'application/json'
},
data: {
name: 'John',
age: 22
}
}
axios(config);여기에서 URL, 데이터 또는 메소드를 포함한 모든 매개 변수가 구성 객체에 있음을 확인할 수 있으므로 모든 것을 한곳에서 정의하는 것이 더 쉬울 수 있습니다.
JSON
앞서 언급했듯이 .fetch() 메서드를 사용할 때는 응답 데이터에 어떤 종류의 메서드를 사용해야 하며 요청과 함께 본문을 보낼 때 데이터를 문자열화해야 합니다.
axios에서는 자동으로 수행되므로 요청에 데이터를 전달하거나 응답에서 데이터를 가져옵니다. 자동으로 문자열화되므로 다른 작업이 필요하지 않습니다.
fetch() 및 axios에서 데이터를 가져 오는 방법을 살펴 보겠습니다.
// fetch
fetch('url')
.then((response) => response.json())
.then((data) => console.log(data))
.catch((error) => console.log(error))
// axios
axios.get('url')
.then((response) => console.log(response))
.catch((error) => console.log(error))위의 예에서 axios에서는 데이터를 JSON 형식으로 변환해야 하는 추가 코드 줄이 없고 .fetch() 예제에 이 줄이 있음을 알 수 있습니다.
많은 호출을 생성하는 더 큰 프로젝트의 경우 코드 반복을 피하기 위해 axios를 사용하는 것이 더 편합니다.
오류 처리
이 시점에서 오류 처리가 매우 쉽기 때문에 axios에 대한 점수도 제공해야 합니다. 404와 같은 잘못된 응답이 있을 경우 프라미스가 거부되고 오류가 반환되므로 오류를 포착해야 하며 오류가 무엇인지 확인할 수 있습니다. 코드 예제를 보겠습니다.
axios.get('url')
.then((response) => console.log(response))
.catch((error) => {
if (error.response) {
// When response status code is out of 2xx range
console.log(error.response.data)
console.log(error.response.status)
console.log(error.response.headers)
} else if (error.request) {
// When no response was recieved after request was made
console.log(error.request)
} else {
// Error
console.log(error.message)
}
})위 코드에서는 응답이 좋을 때 데이터를 반환했지만 어떤식으로든 요청이 실패하면 .catch() 부분에서 오류 유형을 확인하고 적절한 메시지를 반환 할 수 있었습니다.
.fetch() 메서드를 사용하면 조금 더 복잡합니다. .fetch() 메서드에서 응답을 받을 때마다 상태가 성공인지 확인해야 합니다. 그렇지 않아도 응답을 받을 수 있기 때문입니다. .fetch()의 경우 요청이 완료되지 않을 때만 약속이 해결되지 않습니다. 코드 예제를 보겠습니다.
fetch('url')
.then((response) => {
if (!response.ok) {
throw Error(response.statusText);
}
return response.json()
})
.then((data) => console.log(data))
.catch((error) => console.log(error))이 코드에서 promise 객체의 코드 상태를 확인하고 응답 상태가 ok이면 .json() 메서드를 처리하고 사용할 수 있지만 그렇지 않은 경우 .then() 안에 오류를 반환해야 합니다.
쉽고 적절한 오류 처리를 위해 axios는 확실히 프로젝트에 대한 더 나은 솔루션이 될 것입니다. 그러나 여전히 하나 또는 두 개의 요청으로 작은 프로젝트를 빌드 하는 경우 .fetch()를 사용하는 것이 좋지만 처리하는 것을 기억해야 합니다. 올바르게 오류.
다운로드 진행
많은 양의 데이터를 다운로드해야 할 때 진행 상황을 따르는 방법이 유용 할 것입니다. 특히 사용자가 인터넷 속도가 느린 경우에는 더욱 그렇습니다. 이전에는 진행률 표시기를 구현하기 위해 개발자가 XMLHttpRequest.onprogress 콜백을 사용했습니다. .fetch() 및 axios에는 여러 가지 방법이 있습니다.
.fetch()에서 다운로드 진행 상황을 추적하기 위해 response.body 속성 중 하나인 ReadableStream 객체를 사용할 수 있습니다. 그것은 청크별로 신체 데이터 청크를 제공하며, 시간에 소비되는 데이터의 양을 계산할 수 있게 해줍니다.
axios에서는 진행률 표시기를 구현하는 것도 가능하며 설치 및 구현할 수 있는 준비 모듈이 있기 때문에 훨씬 더 쉽습니다. Axios Progress Bar라고합니다.
다운로드 할 대용량 데이터가 많고 진행률 표시기를 추적하려는 경우 axios를 사용하여 더 쉽고 빠르게 관리 할 수 있지만 .fetch()는 가능성도 제공합니다. 같은 결과.
HTTP 차단
HTTP 인터 셉션은 애플리케이션에서 서버로의 HTTP 요청을 확인하거나 변경해야 하는 경우 또는 다른 방식으로 (예 : 인증) 중요 할 수 있습니다.
axios의 경우 HTTP 인터 셉션은 이 라이브러리의 주요 기능 중 하나이므로 이를 사용하기 위해 추가 코드를 만들 필요가 없습니다. 코드 예제를 통해 얼마나 쉽게 할 수 있는지 살펴 보겠습니다.
// request interceptor
axios.interceptors.request.use((config) => {
console.log('Request sent');
})
// response interceptor
axios.interceptors.response.use((response) => {
// do an operation on response
return response
})
axios.get('url')
.then((response) => console.log(response))
.catch((error) => console.log(error))코드에서 요청 차단 및 응답 차단을 볼 수 있습니다. 첫 번째 경우에는 요청 전송에 대해 알리는 console.log를 만들었으며 응답 차단에서 응답에 대한 모든 작업을 수행 한 다음 반환 할 수 있습니다.
.fetch()는 기본적으로 HTTP 가로 채기를 제공하지 않습니다. .fetch() 메서드를 덮어 쓰고 요청을 보내는 동안 발생해야 하는 작업을 정의 할 수 있지만 물론 더 많은 코드가 필요하고 더 복잡할 수 있습니다. axios 기능을 사용하는 것보다.
결론
이 기사에서는 다운로드 진행이나 오류 처리와 같은 몇 가지 중요한 기능과 구문을 통해 간단한 개요부터 시작하여 HTTP 요청을 생성하는 데 사용되는 두 가지 방법을 비교합니다.
이 비교는 좋은 오류 처리 또는 HTTP 차단이 필요한 많은 HTTP 요청이 있는 애플리케이션의 경우 Axios가 더 나은 솔루션임을 보여줍니다. 간단한 API 호출 몇 개만 있는 소규모 프로젝트의 경우 Fetch도 좋은 솔루션이 될 수 있습니다.
프로젝트에 가장 적합한 솔루션을 선택할 때 한 가지 더 많은 요소에 주의를 기울이는 것이 매우 중요합니다. Axios는 대부분의 브라우저와 Node.JS 환경에서도 지원되며 Fetch는 최신 브라우저에서만 지원되고 일부는 이전 브라우저에서 발행되었을 수 있습니다.
이 지식을 바탕으로 귀하에게 가장 적합한 솔루션을 선택하고 이 비교가 도움이 되었기를 바랍니다.
등록된 댓글이 없습니다.
