XMLHttpRequest(XHR) VS Fetch VS Axios

AJAX 란

비동기 자바스크립트와 XML (Asynchronous JavaScript And XML)을 말합니다.
간단히 말하면, 서버와 통신하기 위해 XMLHttpRequest
객체를 사용하는 것을 말합니다. JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있습니다.

XHR

• AJAX 요청을 생성하는 JavaScript API 입니다.
• 자바스크립트에서 요청을 보내는 기존방식은 프로미스를 지원하지 않아 수많은 콜백을 받게 되고 설정방식이 복잡해집니다.
• XHR은 프로미스를 지원하지 않아 then과 catch 같은 메서드를 사용하지 못하는 단점이 있고 문법이 다소 복잡합니다.

XMLHttpRequest 생성방법 
const req = new XMLHttpRequest()

// onload는 오류가 없을 경우에 실행됩니다.

req.onload = function(){
const data = JSON.parse(this.responseText)
console.log(data.name, data.height)
}

// onerror는 오류가 있을때 실행됩니다.
req.oneerror = function(){
const data = JSON.parse(this.responseText)
console.log(data)
}

// 서버가 준비되면 객체의 open(), send()함수를 이용하여 데이트를 전송합니다.
req.open("GET", "https://swapi.dev/api/people/1/")
req.send()

fetch

• ES6부터 도입된 JavaScript의 내장 라이브러리 입니다.
• XMLHttpRequest 다르게 fetch 함수로 요청을 만들수도 있고 프로미스를 지원하여 비동기 함수 및 then과 catch를 사용할수 있습니다.
• 반환된 프로미스는 처리되거나 아닐수도 있습니다.
• fetch 에서는 데이터를 바로 사용할수 없습니다. JSON 본문 콘텐츠를 추출하기 위해서는 json() 메서드를 호출해야 합니다

    // 비동기 함수를 사용하지 않았을때
fetch("[https://swapi.dev/api/people/1/"](https://swapi.dev/api/people/1/"))  
.then((res)=>{  
console.log(res)  
return res.json()  
})  
.then((data)=>{  
console.log(data)  
})  
.catch((e)=>{  
console.log(e)  
})

// 비동기 함수를 사용할떄

const examFetch = async () => {  
const res = await fetch("[https://swapi.dev/api/people/1/"](https://swapi.dev/api/people/1/"))  
const data = await res.json()  
console.log(data)  
}

examFetch()

// 비동기 함수를 사용할떄는 try catch 로 예외처리 해야합니다.

const examFetch = async () => {

try {  
const res = await fetch("[https://swapi.dev/api/people/1/"](https://swapi.dev/api/people/1/"))  
const data = await res.json()  
console.log(data)  
}.catch(e){  
console.log(e)  
}  
}

examFetch()

AXIOS

• AXIOS는 자바스크립트 내장 메서드가 아닌 외부 라이브러리로 자바스크립트의 네이티브 함수가 아닙니다
• AXIOS는 HTTP 요청의 생성과 처리를 최대한 간소화할 목적으로 만들어졌습니다.
• AXIOS는는 자동으로 데이터를 추출하므로 json() 메서드를 사용할 필요가 없습니다.
• 문법을 보기 훨씬 가독성이 좋고 편리하다

axios.get("[https://swapi.dev/api/people/1/"](https://swapi.dev/api/people/1/%22))  
.then(res=>{  
console.log(res)  
})  
.catch(e=>{  
console.log(e)  
})

// 비동기 함수로 작성

const examAxios = async()=>{

try{  
cont res = axios.get("[https://swapi.dev/api/people/1/"](https://swapi.dev/api/people/1/"))  
console.log(res.data)  
}catch(e){  
console.log(e)  
}

}

결론 : axios를 사용하자