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