Promise 함수는
자바스크립트의 코드/함수 디자인 패턴중 하나 이다.
new Promise()문법으로 프로미스라는 변수 오브젝트를 하나 생성하면 끝이다.
Promise 함수 구조
const promise = new Promise();
promise.then(function(){
}).catch(function(){
});1. 변수를 만들고
2. 변수.then() 변수안의 코드가 완료 됬을때 실행
3..catch() 는 변수안의 코드가 실패 했을때 실행 한다.
콜백함수가 아닌 Promise를 쓰는 경우
1. 콜백함수와는 다르게 순차적으로 뭔가를 실행할때 코드가 옆으로 길어지지 않는다.
2. 콜백함수에는 없는 '실패시 특정코드 실행' 이 가능하다.
const promise = new Promise((resolve, reject) => {
setInterval(() => {
resolve();
}, 1000);
// resolve() 가 실행되면 .then 이 실행됨
});
promise
.then(() => {
console.log("성공");
//.then 은 프로미스가 성공일 경우 실행할 코드
})
.catch(() => {
console.log("fail");
// .catch는 프로미스가 에러 날 경우 실행할 코드
})
.finally(() => [
// .finally는 이것저것 다하고 최종적으로 마지막에 실행 할 코드
]);
Promise 함수의 특징
1.성공/실패를 판정하는 자판기 Promise()
2.~~일 경우 성공! ~~가 아닌 경우 실패 ! 이런식으로 Promise 안에 함수 작성
3.관습적으로 매개변수에 resolve 와 reject 로 지정함
4.보통 Ajax, setTimeout, eventListener 를 쓸때 사용함
Promise 함수 활용
HTML 안에 있는 이미지 로딩이 끝나면 코드 실행
<body>
<img
src="imgURL"id="test"/>
<script>
const imageLoading = new Promise((resolve, reject) => {
document.querySelector("test").addEventListener("load", () => {
resolve();
});
document.querySelector("test").addEventListener("error", () => {
reject();
});
});
imageLoading
.then(() => {
console.log("이미지 로드 성공");
})
.catch(() => {
console.log("이미지 로드 실패");
})
.finally(() => {
console.log("종료");
});
</script>
</body>'개발 일지 > JavaScript' 카테고리의 다른 글
| Parameter 와 Argument (0) | 2023.03.28 |
|---|---|
| 호이스팅 과 TDZ (0) | 2023.03.28 |
| REST API가 뭔가요 (0) | 2023.03.27 |
| 웹페이지가 브라우저에 렌더링 되는 과정 (0) | 2023.03.27 |
| JavaScript async/await (0) | 2022.12.20 |
