promise !? 🔮

✅ 정의

프로미스는 자바스크립트에서 제공하는 비동기를 간편하게 처리할 수 있도록 ES6에 도입된 기능이다.

정해진 장시간의 프로젝트를 진행한 후 정상적으로 기능이 수행된다면 성공의 메세지와 함께 처리값을 전달해주고, 만약 기능을 수행하다가 문제가 발생하면 에러가 발생한다.

• Promise 는 클래스다.
• Promise 클래스를 인스턴스화 해서 promise 객체를 만든다.
• 반환된 promise로 원하는 비동기 동작을 처리한다.

promise 사용법! 🎃

promise는 new Promise가 생성되는 순간 바로 excutor(resolve 및 reject 인수를 전달할 실행 함수)이라는 콜백함수를 실행한다.

let promise = new Promise(function(resolve, reject) {
	// 여기 비동기 로직을 작성!
	// 시켜놓고 언제 완료될지 모르는 로직!
});

Promise 객체는 new 키워드와 생성자를 사용해 만든다.

executor를 매개변수로 받고 이 매개변수는 두가지 함수를 받야하는데

첫번째는 resolve(성공했을 때 실행), 두번째는 reject(실패했을 때 실행)가 있다.

• resolve, reject함수는 미리 정의하지 않아도 자바스크립트 엔진에서 미리 정의해 정의해놓는다.
• 그래서 전달 안해도 호출에 문제없음.

let promise = new Promise(function(resolve, reject) {
	resolve();  // 에러 안 납니다.
	reject();
	console.log('실행 됨');
});

---

resolves는 어떻게 쓰지?! 💢

let promise = new Promise(function(resolve, reject) {
	// 여기 비동기 로직을 작성!
	// 시켜놓고 언제 완료될지 모르는 로직!

	// 완료 하면 -> resolve 호출
  // 비동기 동작 실패 하면 -> reject 호출
});

promise.then(function() {
	// 이 함수가 바로 위의 resolve 입니다.
	// 위의 비동기 로직이 성공하면 호출 됩니다!
});

promise의 프로토타입의 함수인 then을 실행시키고 안에 인자로 함수하나만 넣게 되면

그 함수는 곧 resolve를 의미하게 된다! (만약 함수를 두개 넣었다면 첫번째가 resolve함수 겠죠?)

여기서 .then이란? 🖊
Promise.prototype.then()
then() 메소드는 promise를 리턴하고 두개의 콜백함수를 인수로 받는다.
p.then(onFulfilled, onRejected);

let promise = new Promise(function(resolve, reject) {
});
// then 인자 둘 다 callback 함수
// 첫 번째는 성공했을 때 실행할 resolve 함수 정의
// 두 번째는 실패했을 때 실행할 reject 함수 정의
promise.then(function() {}, function() {});

예제코드📝

let promise = new Promise(function(resolve, reject) {
    setTimeout(function() {
				// resolve 함수에 인자 넘기면
        resolve('hello world');
    }, 2000);
});

// resolve로 넘기는 콜백함수의 매개변수로 받을 수 있다.
promise.then(function(msg) {
    console.log(msg);  // 2초 뒤에 hello world!
});

promise 안에 setTimeout 함수가 있으므로 2초뒤 resolve가 문제없이 실행이 될 예정이다.

그렇게 되면 promise.then에서는 resolve 실행시 넘겨주는 인자를 2초 뒤에 console로 찍는다.

reject 도 사용법은 비슷하다 💢💢

아래 예제에서 실패했다고 가정하고 reject를 호출한후 promise.then의 두번째 함수에 reject함수를 정의 하였다.

let promise = new Promise(function(resolve, reject) {
	setTimeout(function() {
				// 실패한 건 아니지만, 실패했다고 가정하고 reject 호출
        reject('으악!');
  }, 2000);
});

promise.then(function() {
	console.log('resolve');
}, function(msg) {
	console.log('reject', msg);
});

---

주의할점 ❌

- 아무리 많은 resolve와 reject를 호출해도 결국 하나의 result만 호출한다.😾

👇첫 번째 resolve 만 실행됨

let promise = new Promise(function(resolve, reject) {
    setTimeout(function() {
        resolve(1);
        resolve(2);
    }, 1000);
});

promise.then(function(msg) {
    console.log(msg);
});

👇첫 번째 reject 만 실행됨

let promise = new Promise(function(resolve, reject) {
    setTimeout(function() {
				reject(1);
        resolve(2);
        resolve(3);
    }, 1000);
});

promise.then(function(msg) {
    console.log('resolve', msg);
}, function(msg) {
    console.log('reject', msg);
});