You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
`loadScript(src, callback)`를 이제 프라미스화해봅시다. 새로운 함수 `loadScriptPromise(src)`는 `loadScript`와 동일하게 동작하지만 `callback`을 제외한 `src`만 인수로 받아야 하고, 프라미스를 반환해야 합니다.
32
-
=======
33
-
The function loads a script with the given `src`, and then calls `callback(err)` in case of an error, or `callback(null, script)` in case of successful loading. That's a widespread agreement for using callbacks, we saw it before.
34
-
>>>>>>> upstream/master
35
-
36
-
Let's promisify it.
37
-
38
-
We'll make a new function `loadScriptPromise(src)`, that does the same (loads the script), but returns a promise instead of using callbacks.
39
-
40
-
In other words, we pass it only `src` (no `callback`) and get a promise in return, that resolves with `script` when the load is successful, and rejects with the error otherwise.
41
-
42
-
Here it is:
43
25
```js
44
26
letloadScriptPromise=function(src) {
45
27
returnnewPromise((resolve, reject) => {
@@ -54,10 +36,9 @@ let loadScriptPromise = function(src) {
54
36
// loadScriptPromise('path/script.js').then(...)
55
37
```
56
38
57
-
<<<<<<< HEAD
58
39
새롭게 구현한 `loadScriptPromise`는 프라미스 기반 코드와 잘 융화됩니다.
59
40
60
-
예시에서 볼 수 있듯이, `loadScriptPromise`는 기존 함수 `loadScript`에 모든 일을 위임합니다. `loadScript`의 콜백은 스크립트 로딩 상태에 따라 `이행` 혹은 `거부`상태의 프라미스를 반환합니다.
41
+
예시에서 볼 수 있듯이, `loadScriptPromise`는 기존 함수 `loadScript`에 모든 일을 위임합니다. `loadScript`의 콜백은 스크립트 로딩 상태에 따라 `이행` 혹은 `거부`상태의 프라미스를 반환합니다.
61
42
62
43
그런데 실무에선 함수 하나가 아닌 여러 개의 함수를 프라미스화 해야 할 겁니다. 헬퍼 함수를 만드는 게 좋을 것 같네요. 프라미스화를 적용 할 함수 `f`를 받고 래퍼 함수를 반환하는 함수 `promisify(f)`를 만들어봅시다.
63
44
@@ -68,21 +49,6 @@ function promisify(f) {
68
49
returnfunction (...args) { // 래퍼 함수를 반환함
69
50
returnnewPromise((resolve, reject) => {
70
51
functioncallback(err, result) { // f에 사용할 커스텀 콜백
71
-
=======
72
-
As we can see, the newfunction is a wrapper around the original `loadScript`function. It calls it providing its own callback that translates to promise `resolve/reject`.
73
-
74
-
Now `loadScriptPromise` fits well in promise-based code. If we like promises more than callbacks (andsoonwe'll see more reasons for that), then we will use it instead.
75
-
76
-
In practice we may need to promisify more than one function, so it makes sense to use a helper.
77
-
78
-
We'llcallit`promisify(f)`:itacceptsato-promisifyfunction `f` and returns a wrapper function.
79
-
80
-
```js
81
-
functionpromisify(f) {
82
-
returnfunction (...args) { // return a wrapper-function (*)
83
-
returnnewPromise((resolve, reject) => {
84
-
functioncallback(err, result) { // our custom callback for f (**)
85
-
>>>>>>> upstream/master
86
52
if (err) {
87
53
reject(err);
88
54
} else {
@@ -102,26 +68,11 @@ let loadScriptPromise = promisify(loadScript);
102
68
loadScriptPromise(...).then(...);
103
69
```
104
70
105
-
<<<<<<< HEAD
106
71
위 예시는 프라미스화 할 함수가 인수가 두 개(`(err, result)`)인 콜백을 받을 것이라 가정하고 작성되었습니다. 십중팔구 이런 상황일 것이고, 커스텀 콜백은 이 상황에 딱 들어맞습니다. `promisify`가 잘 동작하는 것은 말할 것도 없겠죠.
107
-
=======
108
-
The code may look a bit complex, but it's essentially the same that we wrote above, while promisifying `loadScript` function.
109
-
110
-
A call to `promisify(f)` returns a wrapper around `f``(*)`. That wrapper returns a promise and forwards the call to the original `f`, tracking the result in the custom callback `(**)`.
111
-
112
-
Here, `promisify` assumes that the original function expects a callback with exactly two arguments `(err, result)`. That's what we encounter most often. Then our custom callback is in exactly the right format, and `promisify` works great for such a case.
113
-
>>>>>>> upstream/master
114
72
115
73
그런데 함수 `f`가 두 개를 초과하는 인수를 가진 콜백, `callback(err, res1, res2, ...)`을 받는다면 어떤 일이 발생할까요?
116
74
117
-
<<<<<<< HEAD
118
75
이런 경우를 대비하여 좀 더 진화한 헬퍼 함수, `promisify`를 만들어 봅시다. 새롭게 만든 함수를 `promisify(f, true)`형태로 호출하면, 프라미스 결과는 콜백의 성공 케이스(`results`)를 담은 배열, `[res1, res2, ...]`이 됩니다.
119
-
=======
120
-
We can improve our helper. Let's make a more advanced version of `promisify`.
121
-
122
-
- When called as `promisify(f)` it should work similar to the version above.
123
-
- When called as `promisify(f, true)`, it should return the promise that resolves with the array of callback results. That's exactly for callbacks with many arguments.
124
-
>>>>>>> upstream/master
125
76
126
77
```js
127
78
// 콜백의 성공 결과를 담은 배열을 얻게 해주는 promisify(f, true)
@@ -149,22 +100,12 @@ f = promisify(f, true);
149
100
f(...).then(arrayOfResults=>..., err=>...);
150
101
```
151
102
152
-
<<<<<<< HEAD
153
103
`callback(result)`같이 `err`이 없는 형태나 지금까지 언급하지 않은 형태의 이색적인 콜백도 있을 수 있는데, 이런 경우엔 헬퍼 함수를 사용하지 않고 직접 프라미스화 하면 됩니다.
154
-
=======
155
-
As you can see it's essentially the same as above, but `resolve` is called with only one or all arguments depending on whether `manyArgs` is truthy.
156
-
157
-
For more exotic callback formats, like those without `err` at all: `callback(result)`, we can promisify such functions manually without using the helper.
158
-
>>>>>>> upstream/master
159
104
160
105
본 챕터에서 설명한 헬퍼 함수보다 더 유용한 형태의 프라미스화를 도와주는 함수를 제공하는 모듈도 많습니다. [es6-promisify](https://github.com/digitaldesignlabs/es6-promisify)가 대표적인 예입니다. Node.js에선 내장 함수 `util.promisify`를 사용해 프라미스화를 할 수 있습니다.
161
106
162
107
```smart
163
-
<<<<<<<HEAD
164
108
프라미스화는 곧 배우게 될 `async/await`와 함께 사용하면 더 좋습니다. 다만, 콜백을 완전히 대체하지는 못한다는 사실을 기억해 두시기 바랍니다.
165
-
=======
166
-
Promisification is a great approach, especially when you use `async/await` (covered later in the chapter <info:async-await>), but not a total replacement for callbacks.
0 commit comments