비동기 API 호출 후 응답 결과를 알려주는 모습이 꼭 알람 시계와 같다.
Promise
"javascript 비동기 처리 객체"
비동기 처리를 위한 콜백패턴 (Callback Hell 해결..!)
비동기 작업이 맞이할 미래 완료 or 미래 실패 (값)
상태 값
pending(대기) : 비동기처리 수행 X (resolve, reject 호출 X)
new Promise(); //메소드를 호출한 상태fullfilled(완료) : 비동기처리 수행 O (resolve 호출 O)
new Promise(function(resolve, reject) {
resolve(); //호출할 경우 완료(fullfilled) 상태
});rejected(실패) : 비동기처리 수행 O (reject 호출 X)
new Promise(function(resolve, reject) {
reject(); //호출할 경우 실패(Rejected) 상태
});Promise 생성자 함수로 객체 생성 (인스턴스화)
: 콜백 함수 인자로 resolve와 reject를 사용
@param : 비동기 작업 수행할 콜백함수
- resolve
- reject
new Promise (function(resolve, reject){
if(true) resolve("succeess");
else reject("error");
});후속처리메소드 then, catch
1. then
- 두개의 콜백함수 (인자)
- 성공 시 호출됨 (resolve)
- 실패 시 호출됨 (reject) - promise 객체 반환 (객체를 다시 반환하므로 후속처리메소드 다시 사용 가능)
2. catch
- 에러가 발생하면 호출됨 (비동기 처리 중 에러, *then 메소드 내 에러)
- promise 객체 반환
_promise(true)
.then(function (text) {
// 성공시
console.log(text);
}, function (error) {
// 실패시
console.error(error);
});then()의 첫 번째 콜백 함수 내부에서 오류가 나는 경우 오류를 대비해 후자가 선호됩니다.
_promise(true)
.then(JSON.parse)
.catch(function () {
window.alert('체이닝 중간에 에러가!!');
})
.then(function (text) {
console.log(text);
});AJAX vs Promise
- AJAX
function getData(callbackFunc) {
$.get('url/address/', function(response) {
callbackFunc(response); // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌
});
}
getData(function(tableData) {
console.log(tableData); // $.get()의 response 값이 tableData에 전달됨
});- Promise
function getData(callback) {
// new Promise() 추가
return new Promise(function(resolve, reject) {
$.get('url/address/', function(response) {
// 데이터를 받으면 resolve() 호출
resolve(response);
});
});
}
// getData()의 실행이 끝나면 호출되는 then()
getData().then(function(tableData) {
// resolve()의 결과 값이 여기로 전달됨
console.log(tableData); // $.get()의 reponse 값이 tableData에 전달됨
});
Promise Chaining
후속처리메소드를 체이닝하여 CallBack Hell 해결..!
Promise.all() 메소드
인자로 받은 모든 promise들을 병렬로 처리하고 모두 완료되었을 때, resolve하는 새 promise 반환
@param : promise가 담겨있는 배열 (iterable)
//성공
promise.all([
new Promise(resolve => setTimeout(() => resolve(1), 3000)), // 1
new Promise(resolve => setTimeout(() => resolve(2), 2000)), // 2
new Promise(resolve => setTimeout(() => resolve(3), 1000)) // 3
]).then(console.log) // [1,2,3]
.catch(console.log);
//실패
promise.all([
new Promise(resolve => setTimeout(() => reject(new Error('Error 1!')), 3000);),
new Promise(resolve => setTimeout(() => reject(new Error('Error 2!')), 2000);),
new Promise(resolve => setTimeout(() => reject(new Error('Error 3!')), 1000);)
]).then(console.log)
.catch(console.log); //Error 3!( 만약 promise들을 실행 중 하나라도 실패했을 경우 하나만 바로 반환 )
Promise.race() 메소드
가장 먼저 처리된 promise만 반환
@param : promise가 담겨있는 배열 (iterable)
//성공
promise.race([
new Promise(resolve => setTimeout(() => resolve(1), 3000)), // 1
new Promise(resolve => setTimeout(() => resolve(2), 2000)), // 2
new Promise(resolve => setTimeout(() => resolve(3), 1000)) // 3
]).then(console.log) // 3
.catch(console.log);
//실패
promise.race([
new Promise(resolve => setTimeout(() => reject(new Error('Error 1!')), 3000);),
new Promise(resolve => setTimeout(() => reject(new Error('Error 2!')), 2000);),
new Promise(resolve => setTimeout(() => reject(new Error('Error 3!')), 1000);)
]).then(console.log)
.catch(console.log); //Error 3!
Do myself first! 🧐