fetch메소드를 이용한 promise체이닝을 알아보자
let promise = fetch(url);fetch메소드의 목적은 url로부터 데이터를 받고자 할때 사용하며 데이터형식은 텍스트부터 바이너리파일까지 다양한 형식의 데이터를 받을 수 있다.
let promise = fetch('https://blabla/user.json');
console.log(promise);요청url의 서버에 접속불가능하면 promise state는 pending이었다가 rejected로 변경되고 에러가 발생하여 스크립트는 중단된다.
let promise = fetch('user.json');
console.log(promise);요청url 서버가 접속가능하면( 4xx,5xx HTTP상태도 서버와 접속은 가능상태임을 유의하자) 요청url의 접속정보를 담은 문자열형태의 Response객체가 비동기로 반환된다.
소비자핸들러에서는 response객체 프로퍼티를 확인하여 4xx, 5xx인 경우에는 오류처리를 하고 오류가 아닌경우에는 요청url의 데이터를 받기위한 비동기체이닝 생산자작업이 다시 시작한다.
let promise = fetch("user.json");
// fetch함수는 비동기작업을 관리할 promise객체를 반환한다.
promise.then(response =>{
// fetch는 첫번째 비동기작업결과로 response객체를 반환한다.
if(!promise.ok){
throw new Error("404");
}
// fetch는 4xx, 5xx HTTP상태에대해 에러를 발생시키지않기 때문에 여기서 처리해야한다.
return promise.json();
// 요청url에 에러가 없다면 데이터다운로드 비동기작업이 수행되어야 하고 이작업을 관리할
// 새로운 promise객체가 필요하다.
// 다운로드데이터형식에따라 함수는 달라진다.
})
.catch(error=>{
// 발생할 수 있는 에러를 처리하는 에러핸들러
console.log(error);
})HTTP 상태코드 1xx(정보) : 요청을 받았으며 프로세스를 계속 진행합니다. 2xx(성공) : 요청을 성공적으로 받았으며 인식했고 수용하였습니다. 3xx(리다이렉션) : 요청 완료를 위해 추가 작업 조치가 필요합니다. 4xx(클라이언트 오류) : 요청의 문법이 잘못되었거나 요청을 처리할 수 없습니다. 5xx(서버 오류) : 서버가 명백히 유효한 요청에 대한 충족을 실패했습니다.
fetch메소드는 네트워크 연결이 실패하는 경우와 요청을 완료하지 못한 경우에 에러를 발생시킨다. 이 에러를 catch함수로 처리하지 않으면 스크립트는 중단된다.
fetch('https://no-such-server.blabla')
.then((reponse)=>{
if(!reponse.ok){
throw new Error("404, 500");
}
return response.text(); // 데이터 다운로드 체이닝
},
(er)=>{ // then핸들러내부에서 에러처리도 가능하다.
console.log(er);
throw new Error("server conenet failed");
})
.catch(er=> console.log(er))
reponse 프로퍼티가 정상인 데이터를 비동기로 다운로드 받아야 할때
요청한 데이터의 형식에따라 다운로드형식이 달라져야 함을 유의하자.
텍스트데이터와 바이너리 이미지데이터를 같은 함수로 받을 수 는 없다.
Response.text()
Response.arrayBuffer()
Response.blob()
Response.formData()
Response.json()
다운로드할 데이터유형에따라 맞는 메소드를 사용해야 한다.
위 메소드들은 새로운 promise객체를 반환하기떼문에 소비자함수를 사용하면 데이터 다운로드 완료되었을때 호출되며 인자로 다운로드완료된 데이터가 전달된다.
소비자함수블럭내에서 발생되는 에러는 catch소비자함수에서 처리가 가능하며 response.text(); 메소드에서 에러가 발생될수 있기때문에 catch소비자함수를 만들어야 한다.
