Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- 클라우드 서버
- 싸피 면접 후기
- 동기화
- 세마포어와 뮤텍스
- 호스팅
- 세마포어
- Synchronization
- 세마포어란?
- 플로이드 워셜
- 플로이드 와샬
- 싸피
- 다익스트라
- 웹 호스팅
- 호스팅이란?
- 싸피 합격
- Dijkstra Algorithm
- 삼성 청년 SW 아카데미
- 최단 경로
- 서버 호스팅
- 프록시서버
- floyd-warshall
- 세마포어와 뮤텍스의 차이
- 뮤텍스란?
- SSAFY
- Proxy
- 프록시
- Proxy Server
- 다익스트라 알고리즘
- 뮤텍스
Archives
- Today
- Total
어제의 나보다 성장한 오늘의 나
[자바스크립트] Promise란? 본문
Promise란?
“A promise is an object that may produce a single value some time in the future”
- Promise는 자바스크립트 비동기 처리에서 사용되는 객체이다. ( 비동기 처리에 대해... )
프로미스 코드 - 기초
function getData(callbackFunc) {
$.get('url 주소/products/1', function(response) {
callbackFunc(response); // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌
});
}
getData(function(tableData) {
console.log(tableData); // $.get()의 response 값이 tableData에 전달됨
});
- 위의 코드는 간단한 ajax코드이며 콜백 함수를 사용하였다.
- 위 코드에 프로미스를 적용하면 아래의 코드와 같아진다.
function getData(callback) {
// new Promise() 추가
return new Promise(function(resolve, reject) {
$.get('url 주소/products/1', function(response) {
// 데이터를 받으면 resolve() 호출
resolve(response);
});
});
}
// getData()의 실행이 끝나면 호출되는 then()
getData().then(function(tableData) {
// resolve()의 결과 값이 여기로 전달됨
console.log(tableData); // $.get()의 reponse 값이 tableData에 전달됨
});
- new Promise(), resolve(), then()와 같은 프로미스 API를 사용한 구조로 바뀌었다.
프로미스 3가지 상태
- 프로미스를 사용할 때 알아야 하는 가장 기본적인 개념이 바로 프로미스의 상태이다.
- 여기서 말하는 상태는 프로미스의 처리과정을 의미한다.
- new Promise()로 프로미스를 생성하고 종료될 때까지 3가지 상태를 가진다.
- Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
- Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
- Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태
Pending(대기)
먼저 아래와 같은 new Promise() 메서드를 호출하면 대기(Pending) 상태가 된다.
new Promise();
new Promise() 메서드를 호출할 때 콜백 함수를 선언할 수 있고, 콜백 함수의 인자는 resolve, reject이다.
new Promise(function(resolve, reject) {
// ...
});
Fulfilled(이행)
여기서 콜백 함수의 인자 resolve를 아래와 같이 실행하면 이행(Fulfilled) 상태가 된다.
new Promise(function(resolve, reject) {
resolve();
});
이 상태가 되면! 아래와 같이 than()을 이용하여 처리 결과 값을 받을 수 있다!!!!
function getData() {
return new Promise(function(resolve, reject) {
var data = 100;
resolve(data);
});
}
// resolve()의 결과 값 data를 resolvedData로 받음
getData().then(function(resolvedData) {
console.log(resolvedData); // 100
});
Rejected(실패)
new Promise()로 프로세스 객체를 생성하면 콜백 함수 인자로 resolve와 reject를 사용할 수 있다고 했다! 여기서 reject를 아래와 같이 호출하면 실패(Rejected) 상태가 된다.
new Promise(function(resolve, reject) {
reject();
});
그리고 실패 상태가 되면 실패한 이유(실패 처리의 결과 값)를 catch()로 받을 수 있다.
여러 개의 프로미스 연결하기 (Promise Chaining)
- 프로미스의 또 다른 특징은! 여러 개의 프로미스를 연결하여 사용 가능하다.
function getData() {
return new Promise({
// ...
});
}
// then() 으로 여러 개의 프로미스를 연결한 형식
getData()
.then(function(data) {
// ...
})
.then(function() {
// ...
})
.then(function() {
// ...
});
실무에서 있을 법한 프로미스 연결 사례
getData(userInfo)
.then(parseValue)
.then(auth)
.then(diaplay);
ar userInfo = {
id: 'test@abc.com',
pw: '****'
};
function parseValue() {
return new Promise({
// ...
});
}
function auth() {
return new Promise({
// ...
});
}
function display() {
return new Promise({
// ...
});
}
프로미스의 에러 처리 방법
- 실제 서비스를 구현하다 보면 네트워크 연결, 서버 문제 등으로 오류가 발생할 수 있다.
- 예외 처리 방법에는 2가지가 있다.
1. than()의 두번째 인자로 에러를 처리하는 방법
getData().then( handleSuccess, handleError );
2. catch()를 이용하는 방법
getData().then().catch();
- 위 2가지 방법은 모두 프로미스의 reject() 메서드가 호출되어야만 실행된다.
프로미스 에러 처리는 가급적 catch()를 사용하자!!!
- than()의 첫 번째 콜백 함수 내부에서 오류가 나는 경우 제대로 잡지를 못한다.
- 따라서, 더 많은 예외 처리 상황을 위해 프로미스의 끝에 가급적 catch()를 붙이자!
출처
'공부 > JavaScript && jquery' 카테고리의 다른 글
[자바스크립트] AJAX란 무엇인가? (0) | 2021.06.18 |
---|---|
[자바스크립트] ES6(ES2015+) 방식 import와 export (0) | 2021.05.28 |
[자바스크립트] 비동기 처리와 콜백 함수 (0) | 2021.04.29 |
[자바스크립트] Destructuring assignment ( 해체할당 ) (0) | 2021.04.27 |
[자바스크립트] function name property (0) | 2021.04.27 |
Comments