소비자 : then, catch, finally + fetch

Yun Young Choi·2022년 12월 15일
0

Javascript

목록 보기
6/7
post-thumbnail
  • 프로미스 객체 : executor 함수를 통해 처리된 결과나 에러를 받을 소비 함수를 이어주는 역할

then 메서드

  • then의 첫 인수 = 프로미스 이행됐을 때 실행되는 소비 함수
    결과값을 리턴함
  • then의 두 번째 인수 = 프로미스 거부됐을 때 실행되는 소비 함수 에러를 리턴함
// ###### resolve 실행하는 함수 ########
let promise = new Promise(function(resolve, reject) {
	setTimeout(() => resolve("done!"), 1000);
});

// resolve 함수는 then의 첫 번째 함수(인수)를 실행
promise.then(
	result => alert(result), // 1초 후 "done!"을 출력
	error => alert(error) // 실행되지 않음
);

-----------------------------------------------

// ######## reject 실행하는 함수 ########
let promise = new Promise(function(resolve, reject) {
	setTimeout(() => reject(new Error("에러 발생!")), 1000);
});

// reject 함수는 then의 두 번째 함수를 실행
promise.then(
	result => alert(result), // 실행되지 않음
	error => alert(error) // 1초 후 "Error: 에러 발생!"를 출력
);
  • 작업이 성공됐을 때만 처리하고 싶다면 then에 첫 인수만 전달
let promise = new Promise(resolve => {
	setTimeout(() => resolve("done!"), 1000);
});

promise.then(alert); // 1초 뒤 "done!" 출력

catch 메서드

  • 에러가 발생한 경우만 다루고 싶다면 then의 첫 인수로 null, 두 번째 인수로 에러 처리 코드 담은 함수 전달하거나
  • catch 메서드를 사용할 수 있음
  • 코드가 간결하다는 점을 제외하면 then(null, f)와 완벽하게 같다.
let promise = new Promise((resolve, reject) => {
	setTimeout(() => reject(new Error("에러 발생!")), 1000);
});

// promise.then(null, alert); 동일하게 동작
promise.catch(alert); // 1초 뒤 "Error: 에러 발생!" 출력

finally 메서드

  • 프로미스가 처리되면 finally 함수 무조건 실행
  • 결과에 상관없이 실행해야 할 코드가 필요하다면 fianlly 사용
  • fianlly 핸들러(핸들러 => 전달 함수)에는 전달 받을 인수 X
  • 프로미스가 이행됐는지, 거부됐는지 여부를 알 수 없음
    • finally 핸들러에서는 절차를 마무리하는 보편적 동작을 수행 하기에 결과를 몰라도 됨
  • fianlly 핸들러는 자동으로 다음 핸들러에 결과값, 에러값 전달
new Promise((resolve, reject) => {
	/* 시간이 걸리는 어떤 일을 수행하고, 그 후 resolve 혹은 reject 함수를 호출 */
})

// finally로 전달한 함수는 성공, 실패 여부와 상관없이 프라미스 무조건 실행
.finally(() => /* 코드 실행 */ )
.then(result => result와 err 보여줌 => error 보여줌)
new Promise((resolve, reject) => {
  throw new Error("에러 발생");
})

.finally( () => alert("프로미스 준비") )
.catch(err => alert(err));
  • 프로미스가 대기(pending) 상태일 때 then/catch/finally 핸들러는 프로미스가 처리(settled) 되길 기다림
  • 반면, 프로미스가 이미 처리됐다면 핸들러가 즉각 실행
// 아래 프라미스는 생성과 동시에 이행된 상태로 처리됨
let promise = new Promise(resolve => resolve("완료!"));

// 기다리지 않고 바로 "완료!" 출력
promise.then(alert);

fetch

  • 네트워크 요청을 보내는 함수, 결과로 프로미스 객체를 반환

// 네트워크 요청 코드

fetch('/article/promise-chaining/user.json')
	// 원격 서버가 응답하면 then 핸들러가 실행됨
	.then(function(response) {
		// response.text()는 응답 텍스트 전체가 다운로드되면 결괏값(응답 텍스트)을 resolve 함수로 전달하는 이행 프라미스 객체를 생성 후 반환함
		return response.text();
})
	.then(function(text) {
		// 원격에서 받아온 파일의 내용
		alert(text); // {"name": "iliakan", "isAdmin": true}
});

// json 메서드로 텍스트가 아닌 객체를 전달

fetch('/article/promise-chaining/user.json')
	.then(response => response.json()) // 위 코드와 동일한 기능을 하지만 response.json()은 원격 서버에서 불러온 내용을 JSON으로 변경
	.then(user => alert(user.name)); // iliakan, got user name
  • respone.json()은 원격 서버에서 불러온 내용을 JSON으로 변경
profile
안냥하세요

0개의 댓글

관련 채용 정보