동기
- 판매자가 택배상자 상품에 넣기
- 구매자가 택배상자 받기
- 구매자가 택배상자 열기
- 구매자가 상품 꺼내기
--------------------------------------------------------------------------
프로미스 - 상품이 나중에 들어오는 택배상자
- 판매자가 택배상자를 판매자에게 보냄
- 구매자가 택배상자를 받았으나 안에 상품이 없는 상태
- 상품이 없으면 안열림 / 상품이 있으면 자동으로 열림
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const bool = true;
// 프로미스
const promise = new Promise((resolve, reject)=>{
// 프로미스 내에서 작업을 하고
// 작업이 성공하면 resolve 실행 / 실패하면 reject 실행
setTimeout(() => {
if (bool) {
resolve("작업성공");
} else {
reject("작업실패");
}
}, 3000);
});
promise
// 결과가 resolve로 나오면 then안에 있는 콜백 함수가 실행된다
.then((value)=>{
console.log(value);
})
// 결과가 reject 나오면 catch안에 있는 콜백 함수가 실행된다
.catch((value)=>{
console.log(value);
})
// 어떻게 결과가 나오든 무조건 실행된다
.finally(()=>{
console.log("finally");
});
console.log("프로미스 작성 이후 코드 실행");
</script>
</body>
</html>
실습
- 세탁기 돌리기 1 - 세탁 끝나면 빨래감 널기 2 - 라면 먹기 3
- 세탁기 돌리기를 Promise
- 세탁기 돌리기 시작할 때 "세탁을 시작합니다" (메시지 출력 1)
- 세탁기가 다 돌아가면 "빨래감을 널었습니다" (메시지 출력 3)
- 라면 다먹으면 "라면을 먹었습니다" (메시지 출력 2)
<script>
// 동기
// console.log("세탁을 시작합니다.");
// console.log("빨래감을 널었습니다.");
// console.log("라면을 먹었습니다.");
const 빨래시간 = 2000;
// 비동기
console.log("세탁을 시작합니다.");
new Promise((resolve)=>{
if (세탁기상태) {
setTimeout(() => {
resolve("빨래완료");
}, 빨래시간);
} else {
reject("세탁기고장");
}
}).then(()=>{
console.log("빨래감을 널었습니다");
}).catch(()=>{
console.log("세탁기가 고장났습니다.")
});
console.log("라면을 먹었습니다.");
</script>
'프로그래밍 언어와 기술 > JavaScript' 카테고리의 다른 글
| [JavaScript] DOMContentLoaded (0) | 2023.12.28 |
|---|---|
| [JavaScript] fetch (0) | 2023.07.24 |
| [JavaScript] 실습 - fetch, 반복문 사용해서 li에 값 채우기 (0) | 2023.07.12 |
| [JavaScript] JSON - fetch() .then()~ (0) | 2023.07.12 |
| [JavaScript] 실습 - 배경이 흰색, 검정색으로 바뀌는 토글버튼 만들기 (0) | 2023.07.12 |