Axios 또는 Fetch?- 2분 안에

개발자가 가져오기 대신 Axios를 사용하는 이유가 궁금한 적이 있습니까? 둘 다 HTTP 또는 XMLHttp 요청을 처리하는 수단임을 알고 있으므로 둘 다 모든 유형의 API 호출(get, post, put 등)을 수행할 수 있습니다. 둘 다 ES6에 기본 제공되는 Promise API를 기반으로 합니다. 그러나 주목해야 할 주요 사항은 무엇입니까?

첫째, .fetch()에는 JSON 데이터를 처리하는 동안 2단계 프로세스가 있습니다. 첫 번째는 실제 요청을 하고 두 번째는 응답에서 .json() 메서드를 호출하는 것입니다.

const url = 'https://api.spotify.com/v1/artists/0OdUWJ0sBjDrqHygGUXeCF'

fetch(url)
.then(response => response.json())
.then(data => console.log(data));

훌륭한 개발자로서 우리의 주요 목표는 코드를 최소화하는 것입니다. Axios는 한 줄로 처리합니다.

const url = 'https://api.spotify.com/v1/artists/0OdUWJ0sBjDrqHygGUXeCF'

axios.get(url).then(response => console.log(response));

두 번째는 오류 처리입니다. 논리적으로 .fetch()에 오류가 발생하면 .catch() 블록에 들어가 반환해야 하지만 결국 체인에서 다음 then()을 실행합니다. 아래 참조:



그러나 Axios는 이를 예상대로 처리합니다.


catch에서 반환되며 더 이상 .then() 연결이 없습니다.

따라서 .fetch() 메서드는 ES6에서 기본적으로 HTTP 요청을 가져오는 좋은 방법이지만 이러한 타사 라이브러리에서 처리할 수 있는 몇 가지 문제가 있습니다.