비동기 통신을 간편하게 구현하기 위해서 XMLHttpRequest, jQuery, Fetch API 등을 사용합니다. 이 중에서 XMLHttpRequest는 비교적 사용하기 어렵고, 코드가 복잡해지며, jQuery는 다른 강력한 라이브러리들이 등장하면서 점점 사용되지 않는 추세입니다.
오늘은 비동기 통신의 또 다른 방법인 Fetch API에 대해 알아보겠습니다.
Fetch API
XMLHttpRequest는 사용법이 복잡하고, 코드도 깔끔하지 못했습니다. 그래서 XMLHttpRequest를 대체하기 위해 자바스크립트는 ES6 부터 Fetch API를 비동기 처리의 표준으로 채택했습니다. Fetch API는 브라우저 내부에 내장되어있기 때문에, 다른 라이브러리처럼 설치과정이 없어도 이용할 수 있다는 장점도 가지고 있습니다.
Fetch API는 네트워크의 Request와 Response에 대한 객체를 제공하는데, 메소드가 fetch()하나 뿐 입니다. 이 메소드는 프로미스 객체를 반환하는데, 요청의 성공/실패에 관계없이 반환된 프로미스 객체로 부터 Response 객체를 취득할 수 있습니다.
fetch()
fetch(url, options)첫 번째 인수로 취득할 요소의 url을 받습니다. 이 url은 필수 인수입니다. 두 번째 인수인 options는 HTTP 요청 방식, 요청 헤더, 요청 본체 등을 설정할 수 있습니다.
fetch는 사용될 때는 아래와 같은 구조를 갖고 실행됩니다.
fetch(url, (options))
.then((res)=> {
//url로부터 fetch의 호출이 성공했을 때의 동작
})
.catch((error)=>{
//url로부터 fetch의 호출이 실패했을 때의 동작
});fetch의 호출 성공시 응답하는 객체인 res(Response)에서는 HTTP 상태, 응답 헤더, 응답 본체 등을 취득할 수 있습니다.
GET, POST
HTTP 통신 방식에는 대표적으로 GET, POST가 있습니다. GET은 클라이언트가 서버에서 데이터를 얻고자 할 때 사용하는 방식, POST는 클라이언트가 서버의 데이터를 추가하거나 수정할 때 사용하는 방식입니다.
fetch는 GET방식일 때와 POST방식일 때 사용방법이 조금 다릅니다.
GET 방식
GET방식은 처음 소개한 방식 그대로 이용합니다. 물론 options 인수에 GET방식임을 알려도 됩니다.
fetch(url)
.then((res)=> {
//url로부터 fetch의 호출이 성공했을 때의 동작
})
.catch((error)=>{
//url로부터 fetch의 호출이 실패했을 때의 동작
});
//또는
fetch(url, {
method: "GET"
})
.then((res)=> {
//url로부터 fetch의 호출이 성공했을 때의 동작
})
.catch((error)=>{
//url로부터 fetch의 호출이 실패했을 때의 동작
});
POST 방식
POST방식은 POST 방식임을 옵션에 알리고, 전송하는 데이터 포맷을 지정해주어야합니다. 대표적으로 요즘 웹 통신에서 많이 사용되는 JSON을 예로 들어보겠습니다.
fetch(url, {
method: "POST",
headers: {
//JSON 이용시, 헤더에 JSON을 이용한다고 알려야함!
//+헤더에 넣고싶은 내용
},
body: {
//JSON 이용시 body를 반드시 직렬화 해주어야 합니다.(JSON.stringfy)
//바디에 넣고싶은 내용들
}
})
.then((res)=> {
//url로부터 fetch의 호출이 성공했을 때의 동작
})
.catch((error)=>{
//url로부터 fetch의 호출이 실패했을 때의 동작
});