FETCH API

목차
1. FETCH API?
2. 사용법
3. 기존 ajax와 차이점은?

1. FETCH API?

• AJAX를 발전시킨 Promise기반 비동기 통신 라이브러리

Fetch API는 비동기 통신 라이브러리로 기존에 XMLHttpRequest의 단점을 보완하여 보다 편리하게 서버와 통신할 수 있다. 서버와 통신을 하기 위해 브라우저 내에 탑재된 라이브러리이기 때문에 별로도 설치하거나 CND로 코드를 가져올 필요는 없다.

2. 사용법

프로미스 기반이기 때문에 then catch 또는 async/await를 사용하여 통신의 결과를 확인할 수 있다. 기존 XMLHttpRequest보다 사용하는 방법이 간편하다.

fetch(url,option)
.then(result=>{
    // 성공시 실행할 코드
}).catch(error=>{
    // 실패시 실행할 코드
})

// ex)
fetch("localhost:3000",{
    headers:{
        "Content-Type":"application"
    },
    body:{
        data:"전송 데이터"
    }
})
.then(result=>{
    console.log(result)
}).catch(error=>{
    console.error(error)
})

Fetch를 사용하는 방법은 요청할 url와 특정 옵션들을 지정하면 통신이 되는지 확인할 수 있다. 옵션은 다음과 같다. 

method	http 요청 메서드
mode	cors설정을 위한 속성으로 기본값은 cors
credentials	cors의 설정 중 하나로 자격증명을 요청에 포함할 것인지
cache	캐시의 사용여부
headers	요청의 헤더로 본문이나 요청의 상세 내용이 포함
redirect	요청 중에 발생하는 HTTP 리디렉션을 처리하는 방식
body	요청의 본문

3. 기존 ajax와 차이점은?

XMLHttpRequest도 있는데 Fetch API를 사용하는 이유는 무엇일까? 그 차이를 확인하고 그 이유를 알아보자.

XMLHttpRequest	Fetch API
콜백 기반	promise기반
응답 데이터는 텍스트, json,문서 등으로 다양한 타입에 처리 필요	응답은 response객체
에러 또는 이후 처리를 여러 응답 상태 코드에 따라 수동 처리	에러를 catch나 응답객체의 ok 속성을 통해 제어
스트림 처리 미지원	스트림 지원
구버전, 최신 브라우저 모두 지원	최신 브라우저에서 지원

 

XMLHttpRequest 또한 장점이 있지만 Fetch API를 사용하는 것이 간결하고 장점이 더 많은 듯 하다.