일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- 자바스크립트 객체
- 파이썬
- ES6
- 다크웹
- Oracle SQL
- numpy
- 랜섬웨어
- 카카오프로젝트
- 자바스크립트 prototype
- 자바스크립트 기본 문법
- oracle
- 자바스크립트 node
- 카카오프로젝트100
- 자바스크립트 jQuery
- python
- 자바스크립트 element api
- 자바스크립트
- 카카오프로젝트 100
- 보안뉴스 한줄요약
- 오라클
- 자바스크립트 API
- php
- oracle db
- 보안뉴스
- 보안뉴스한줄요약
- 보안뉴스요약
- GIT
- 보안뉴스 요약
- 깃허브
- javascript
- Today
- Total
FU11M00N
[ JavaScript ] JS Promise 본문
- JS 프로미스
프로미스는 비동기 작업을 조금 더 편하게 하기위해 나온 ES6의 새로운 기능입니다.
이전엔 비동기 작업을 처리할 때에 콜백 함수로 처리를했었습니다.
하지만 콜백 함수로 하게되면 비동기 작업이 많아질수록 코드가 난잡해져 일명 "콜백 지옥"이 나오게 되었습니다.
콜백지옥을 방지하기위해 프로미스를 사용합니다.
내용이 실행은 되었지만 결과를 아직 반환하지 않은 객체
Then을 붙이면 결괏값을 반환합니다.
만약 실행이 완료되지 않았으면 완료된 후에 Then 내부 함수가 실행됩니다.
- Promise 만들기
Promise 는 다음과 같이 만듭니다.
const myPromise = new Promise((resolve, reject) => {
//블라블라
//블라블라
//블라블라
//블라블라
//블라블라
});
하지만 비동기 작업은 성공 할 수도있고 실패 할 수도 있기때문에
성공할때에는 resolve를 호출하면되고,
실패를 할 떄에는 reject를 호출하면 됩니다.
const conditon = true;
const promise = new Promise((resolve,reject) => {
if (conditon){
resolve("성공");
}
else{
reject("실패");
}
});
promise
.then((message)=> {
console.log(message)
})
.catch((error) => {
console.error(error);
})
.finally(() => {
console.log("무조건");
});
성공 리턴값인 Resolve는 then을 통하여 작업을 설정할수있고
실패 리턴값인 Reject는 catch을 통하여 작업을 설정할 수 있습니다.
Resolve(성공리턴값) -> then으로 연결
Reject(실패리턴값) -> catch로 연결
Finally 부분은 무조건 실행됨
promise
.then((message) => {
return new Promise((resolve,reject)=> {
resolve(message);
});
})
.then((message2) => {
console.log(message2);
return new Promise((resolve,reject)=> {
resolve(message);
});
})
.then((message3) =>{
console.log(message3);
})
.catch((error) => {
console.error(error);
});
promise를 사용하면 위와같이 콜백지옥을 더이상 안봐도 됩니다.
프로미스의 then은 연달아 사용이 가능합니다. 이것을 프로미스 체이닝이라고 칭하기도합니다.
then 안에 return 한 값이 다음 then으로 넘어가고
그 return값이 프로미스이면 resolve로 넘어가고
에러가 난다면 catch로 이동합니다.
하지만 then을 계속사용하게된다면 이것또한 "then 지옥" 이라고도 합니다.
그러하여 async와 await를 사용합니다. 그것은 다음글에서 정리해보겠습니다.
ref Node.js 교과서: 기본기에 충실한 Node.js 10 입문서
'Programming > Javascript' 카테고리의 다른 글
동기 비동기 (2) | 2022.12.14 |
---|---|
[ JavaScript ] JS async와 await (0) | 2021.03.06 |
[ Node.js ] Node의 특징 (0) | 2021.03.04 |
[ Node.js ] Node란 (0) | 2021.03.04 |
[ ES6 Script ] JS 기본 매개변수 (0) | 2021.02.16 |