1. Promise 란?

js에서 제공하여 비동기를 간편하게 처리할 수 있게 해주는 object임, 아래 2가지를 핵심적으로 생각하며 공부하자!

  1. State
    1. 프로세스가 무거운 operation을 수행하고 있는 중인지(pending) →기능 수행이 다 끝나서(fulfilled or rejected) 성공했는지, 실패했는지 이런 상태에 대해서 이해하는게 중요
  2. producer와 consumer의 차이 알기
    1. producer : 우리가 원하는 데이터를 제공하는 사람
    2. consumer : 제공된 데이터를 쓰는 사람

2. Promise 만들기

  1. Producer
// 1. Producer
// promise는 객체라서 아래처럼 new __ 이렇게 생성가능
// Promise는 두가지의 콜백함수를 인자로 받음 -> resolve : 기능을 정상적으로 수행해서 마지막에 데이터를 전달하는 콜백함수
//-> rejecte : 기능을 수행하다가 문제가 생기면 에러 띄우는 콜백함수
const promise = new Promise((resolved,rejected) => {
		//시간이 많이 걸리는 네트워크 통신, 파일 읽기, 데이터 받아오기 이런 것들은 동기적으로 처리하면 그 다음 코드가 나오지 않아 비동기로 처리하는게 좋음
		console.log('doing something'); // 콘솔창에 바로 실행됨 -> promise가 만들어지는 그 순간 네트워크 통신과 같은 excuter안의 콜백함수 내용이 실행됨
		setTimeout(()=>{ 
			resolve('ellie'); // 성공시 resolve 실행
			//or (resolve 나 reject 둘 중에 하나 쓰기)
			reject(new Error("no network")); // 실패시 reject 실행후 js에서 제공하는 Error로 콘솔창에 표기
		},2000)
	}
)
  1. Consumers
//2.Consumers : then, catch, finally 등을 이용해 값을 받아올 수 있음 

//값이 정상적으로 수행이 된다면 (===then) value를 받아와 우리가 원하는 콜백함수를 전달  
promise.then((value)=>{ 
	// value 에 producer 에 만들어놓은 resolve('ellie')의 eillie가 들어올거임
	// 그리고 then은 똑같은 promise를 다시 리턴하기 때문에 promise의 .catch를 쓸 수 있음
	console.log(value);
})
.catch(error => { // 값이 성공적으로 수행 못했다면 error 띄우기 
	console.log(error);
})
.finally(
	//성공하거나 실패하는 거 상관없이 무조건 호출하기 때문데 무조건 마지막에 호출하고 싶은 게 있으면 이걸 사용하자
	() => {
		console.log('finally');
	}
;

캡처.PNG

캡처.PNG

3. promise chaining

캡처.PNG

4. Promise chaining 시, 오류 처리 방법

캡처.PNG