-
Notifications
You must be signed in to change notification settings - Fork 0
/
callbackToPromise.js
109 lines (100 loc) · 2.35 KB
/
callbackToPromise.js
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
// function call(name) {
// return new Promise(function (res, rej) {
// setTimeout(function () {
// console.log(name);
// res(name);
// }, 1000);
// });
// }
// function back() {
// return new Promise(function (res, rej) {
// setTimeout(function () {
// console.log('back');
// res('back');
// }, 1000);
// });
// }
// function hell() {
// return new Promise(function (res, rej) {
// setTimeout(function () {
// res('promise hell');
// }, 1000);
// });
// }
// 실습: callback -> promise
// call('kim')
// .then(function (result) {
// console.log(`${result} 반가워`);
// return back();
// })
// .then(function (result) {
// console.log(`${result} 을 실행했구나`);
// return hell();
// })
// .then(function (result) {
// console.log(`여기는 ${result}`);
// });
// 실습: promise -> async/await
// async function exec() {
// let user = await call('kim');
// console.log(user + '님 환영합니다.');
// let ba = await back();
// console.log(ba + '을 실행했구나');
// let hello = await hell();
// console.log('여기는 ' + hello);
// }
// exec();
// 실습: 프로미스로 배경색 변경
function changeRed() {
return new Promise(function (res, rej) {
setTimeout(function () {
document.body.style.backgroundColor = 'red';
res();
}, 1000);
});
}
function changeOrange() {
return new Promise(function (res, rej) {
setTimeout(function () {
document.body.style.backgroundColor = 'orange';
res();
}, 1000);
});
}
function changeYellow() {
return new Promise(function (res, rej) {
setTimeout(function () {
document.body.style.backgroundColor = 'yellow';
res();
}, 1000);
});
}
function changeGreen() {
return new Promise(function (res, rej) {
setTimeout(function () {
document.body.style.backgroundColor = 'green';
res();
}, 1000);
});
}
function changeBlue() {
return new Promise(function (res, rej) {
setTimeout(function () {
document.body.style.backgroundColor = 'blue';
res();
}, 1000);
});
}
changeRed()
.then(function (result) {
return changeOrange();
})
.then(function (result) {
return changeYellow();
})
.then(function (result) {
return changeGreen();
})
.then(function (result) {
return changeBlue();
});