프라미스 패턴

⚡ 프라미스 패턴

• 콜백 함수와의 비교

const loading = function(path, done) {
	console.log("전달받은 경로:", path);
	done(path + "sample.txt")
}

loading('/folder/text/', function(result) {
	console.log("완료! :", result);
})

const loading = function(path) {
	return new Promise(function(resolve, reject) {
		console.log("전달받은 경로:", path);
		resolve(path + "sample.txt");
	})
}

loading('/folder/text/').then(function(result) {
	console.log(result)
}).catch(function(error) {
	console.log("error:", error);
})

🔷 프라미스의 상태

• fulfilled(처리 완료) - 작업 성공
• rejected(거부 됨) - 작업 실패
• pending(보류 됨) - 작업 시작
• settled(해결 됨) - 처리 완료 혹은 거부 됨
• 
• 사이클
  1. Promise가 Pending 상태 : 아직 작업을 시작하지 않은 대기상태(보류)를 나타냄
  2-1. 성공하면 fulfill 상태가 되고 then()의 콜백 함수가 호출되며 settled 상태 then의 콜백 함수 내에서 비동기 작업이 수행된 이후 수행할 코드를 작성하면 됨
  1. 프라미스가 하나면 2번 단계에서 끝나지만 프라미스가 여러개 생성되어 있고 순차적으로 비동기작업을 진행하야 한다면 a가 끝나 후 b 프라미스를 return 한다.
• 2-2. 오류발생 → reject(거부) 상태가 되며, catch()의 콜백 함수가 호출됨 콜백 함수 내에서 에러 핸들링 코드를 작성

🔷 프라미스 체이닝(Promise chaining)

new Promise(function(resolve, reject) {

  setTimeout(() => resolve(1), 1000); // (*)

}).then(function(result) { // (**)

  alert(result); // 1
  return result * 2;

}).then(function(result) { // (***)

  alert(result); // 2
  return result * 2;

}).then(function(result) {

  alert(result); // 4
  return result * 2;

});

result가 .then 핸들러의 체인(사슬)을 통해 전달된다는 점

순서

1. 1초 후 최초 프라미스가 이행됩니다. – (*)
2. 이후 첫번째 .then 핸들러가 호출됩니다. –(**)
3. 2에서 반환한 값은 다음 .then 핸들러에 전달됩니다. – (***)
4. 이런 과정이 계속 이어집니다.

result가 핸들러 체인을 따라 전달되므로, alert 창엔 1, 2, 4가 순서대로 출력

프라미스 체이닝이 가능한 이유는 promise.then을 호출하면 프라미스가 반환되기 때문입니다. 반환된 프라미스엔 당연히 .then을 호출할 수 있습니다.

🔷 fetch와 체이닝

 let promis = fetch(url);

• 원격 서버가 헤어와 함께 응답을 보내면, 프라미스는 response 객체와 함께 이행됨
• 이때, response 전체가 완전히 다운로드되기 전에 프로미스는 이행 상태가 되어버림
• 확장해서 사용하면 아래의 코드와 같이 사용가능하다

fetch('/article/promise-chaining/user.json')
  .then(response => response.json())
  .then(user => fetch(`https://api.github.com/users/${user.name}`))
  .then(response => response.json())
  .then(githubUser => new Promise(function(resolve, reject) { // (*)
    let img = document.createElement('img');
    img.src = githubUser.avatar_url;
    img.className = "promise-avatar-example";
    document.body.append(img);

    setTimeout(() => {
      img.remove();
      resolve(githubUser); // (**)
    }, 3000);
  }))
  // 3초 후 동작함
  .then(githubUser => alert(`${githubUser.name}의 이미지를 성공적으로 출력하였습니다.`));

..then 또는 .catch, .finally의 핸들러(어떤 경우도 상관없음)가 프라미스를 반환하면, 나머지 체인은 프라미스가 처리될 때까지 대기합니다. 처리가 완료되면 프라미스의 result(값 또는 에러)가 다음 체인으로 전달됩니다.

⚡ 프라미스 패턴

• 콜백 함수와의 비교

const loading = function(path, done) {
	console.log("전달받은 경로:", path);
	done(path + "sample.txt")
}

loading('/folder/text/', function(result) {
	console.log("완료! :", result);
})

const loading = function(path) {
	return new Promise(function(resolve, reject) {
		console.log("전달받은 경로:", path);
		resolve(path + "sample.txt");
	})
}

loading('/folder/text/').then(function(result) {
	console.log(result)
}).catch(function(error) {
	console.log("error:", error);
})

🔷 프라미스의 상태

• fulfilled(처리 완료) - 작업 성공
• rejected(거부 됨) - 작업 실패
• pending(보류 됨) - 작업 시작
• settled(해결 됨) - 처리 완료 혹은 거부 됨

•  사이클
  1. Promise가 Pending 상태 : 아직 작업을 시작하지 않은 대기상태(보류)를 나타냄
  2-1. 성공하면 fulfill 상태가 되고 then()의 콜백 함수가 호출되며 settled 상태 then의 콜백 함수 내에서 비동기 작업이 수행된 이후 수행할 코드를 작성하면 됨
  1. 프라미스가 하나면 2번 단계에서 끝나지만 프라미스가 여러개 생성되어 있고 순차적으로 비동기작업을 진행하야 한다면 a가 끝나 후 b 프라미스를 return 한다.
• 2-2. 오류발생 → reject(거부) 상태가 되며, catch()의 콜백 함수가 호출됨 콜백 함수 내에서 에러 핸들링 코드를 작성

🔷 프라미스 체이닝(Promise chaining)

new Promise(function(resolve, reject) {

  setTimeout(() => resolve(1), 1000); // (*)

}).then(function(result) { // (**)

  alert(result); // 1
  return result * 2;

}).then(function(result) { // (***)

  alert(result); // 2
  return result * 2;

}).then(function(result) {

  alert(result); // 4
  return result * 2;

});

result가 .then 핸들러의 체인(사슬)을 통해 전달된다는 점

순서

1. 1초 후 최초 프라미스가 이행됩니다. – (*)
2. 이후 첫번째 .then 핸들러가 호출됩니다. –(**)
3. 2에서 반환한 값은 다음 .then 핸들러에 전달됩니다. – (***)
4. 이런 과정이 계속 이어집니다.

result가 핸들러 체인을 따라 전달되므로, alert 창엔 1, 2, 4가 순서대로 출력

프라미스 체이닝이 가능한 이유는 promise.then을 호출하면 프라미스가 반환되기 때문입니다. 반환된 프라미스엔 당연히 .then을 호출할 수 있습니다.

🔷 fetch와 체이닝

 let promis = fetch(url);

• 원격 서버가 헤어와 함께 응답을 보내면, 프라미스는 response 객체와 함께 이행됨
• 이때, response 전체가 완전히 다운로드되기 전에 프로미스는 이행 상태가 되어버림
• 확장해서 사용하면 아래의 코드와 같이 사용가능하다

fetch('/article/promise-chaining/user.json')
  .then(response => response.json())
  .then(user => fetch(`https://api.github.com/users/${user.name}`))
  .then(response => response.json())
  .then(githubUser => new Promise(function(resolve, reject) { // (*)
    let img = document.createElement('img');
    img.src = githubUser.avatar_url;
    img.className = "promise-avatar-example";
    document.body.append(img);

    setTimeout(() => {
      img.remove();
      resolve(githubUser); // (**)
    }, 3000);
  }))
  // 3초 후 동작함
  .then(githubUser => alert(`${githubUser.name}의 이미지를 성공적으로 출력하였습니다.`));

..then 또는 .catch, .finally의 핸들러(어떤 경우도 상관없음)가 프라미스를 반환하면, 나머지 체인은 프라미스가 처리될 때까지 대기합니다. 처리가 완료되면 프라미스의 result(값 또는 에러)가 다음 체인으로 전달됩니다.