回答編集履歴
3
リファクタリング
test
CHANGED
|
@@ -76,7 +76,9 @@
|
|
|
76
76
|
|
|
77
77
|
|
|
78
78
|
|
|
79
|
-
const call = num =>
|
|
79
|
+
const call = num => {
|
|
80
|
+
|
|
81
|
+
// とりま空のPromiseを宣言
|
|
80
82
|
|
|
81
83
|
let promise = Promise.resolve(null);
|
|
82
84
|
|
|
@@ -88,13 +90,17 @@
|
|
|
88
90
|
|
|
89
91
|
promise = promise.then(() =>
|
|
90
92
|
|
|
91
|
-
fn1(num + i).then(
|
|
93
|
+
fn1(num + i).then(it => results.push(it))
|
|
92
94
|
|
|
93
95
|
)
|
|
94
96
|
|
|
95
97
|
}
|
|
96
98
|
|
|
99
|
+
// やる事が全部終わったら結果をresultsにすげ替える
|
|
100
|
+
|
|
97
|
-
return promise.then(() => results)
|
|
101
|
+
return promise.then(() => results);
|
|
102
|
+
|
|
103
|
+
}
|
|
98
104
|
|
|
99
105
|
|
|
100
106
|
|
2
async/awaitを意訳したらfor文でつなげるコードより格段に良くなったので差し替え
test
CHANGED
|
@@ -76,35 +76,25 @@
|
|
|
76
76
|
|
|
77
77
|
|
|
78
78
|
|
|
79
|
-
const call = num => {
|
|
79
|
+
const call = num => new Promise(resolve => {
|
|
80
80
|
|
|
81
|
-
let promise = Promise.resolve(
|
|
81
|
+
let promise = Promise.resolve(null);
|
|
82
|
+
|
|
83
|
+
const results = [];
|
|
82
84
|
|
|
83
85
|
for (let i = 0; i < 5; i++) {
|
|
84
86
|
|
|
85
|
-
// 代入していかないと直列繋ぎ
|
|
87
|
+
// このように代入していかないと直列繋ぎで実行してくれない
|
|
86
88
|
|
|
87
|
-
promise = promise.then(
|
|
89
|
+
promise = promise.then(() =>
|
|
88
90
|
|
|
89
|
-
new Promise(resolve =>
|
|
90
|
-
|
|
91
|
-
|
|
91
|
+
fn1(num + i).then(result => results.push(result))
|
|
92
|
-
|
|
93
|
-
results.push(it);
|
|
94
|
-
|
|
95
|
-
resolve(results);
|
|
96
|
-
|
|
97
|
-
})
|
|
98
|
-
|
|
99
|
-
)
|
|
100
92
|
|
|
101
93
|
)
|
|
102
94
|
|
|
103
95
|
}
|
|
104
96
|
|
|
105
|
-
return promise;
|
|
97
|
+
return promise.then(() => results).then(resolve);
|
|
106
|
-
|
|
107
|
-
};
|
|
108
98
|
|
|
109
99
|
|
|
110
100
|
|
|
@@ -118,63 +108,7 @@
|
|
|
118
108
|
|
|
119
109
|
|
|
120
110
|
|
|
121
|
-
しかし、結果が入った配列をバケツリレーにしているのでこれだと歪になっちゃう
|
|
122
|
-
|
|
123
|
-
`fn1`を数値と配列受け取るように改造した方がいいかな？
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
```JavaScript
|
|
128
|
-
|
|
129
|
-
// こっちはちょっと複雑になったけど
|
|
130
|
-
|
|
131
|
-
const fn2 = (num, results) => new Promise(resolve =>
|
|
132
|
-
|
|
133
|
-
setTimeout(() => {
|
|
134
|
-
|
|
135
|
-
results.push(num);
|
|
136
|
-
|
|
137
|
-
resolve(results);
|
|
138
|
-
|
|
139
|
-
}, 500)
|
|
140
|
-
|
|
141
|
-
);
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
const call = num => {
|
|
146
|
-
|
|
147
|
-
let promise = Promise.resolve([]);
|
|
148
|
-
|
|
149
|
-
for (let i = 0; i < 5; i++) {
|
|
150
|
-
|
|
151
|
-
promise = promise.then(results =>
|
|
152
|
-
|
|
153
|
-
// こっちはスッキリ書けた
|
|
154
|
-
|
|
155
|
-
fn2(num + i, results)
|
|
156
|
-
|
|
157
|
-
)
|
|
158
|
-
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
return promise;
|
|
162
|
-
|
|
163
|
-
};
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
call(0).then(console.log);
|
|
168
|
-
|
|
169
|
-
// Promise {<pending>}
|
|
170
|
-
|
|
171
|
-
// 500ms*5の約2.5秒ほど待ってから: [0, 1, 2, 3, 4]
|
|
172
|
-
|
|
173
|
-
```
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
111
|
+
実はES2017で追加された[async/await](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/async_function)という糖衣構文でPromiseを同期処理っぽく書く事が出来る。
|
|
178
112
|
|
|
179
113
|
Lhankor_Mhyさんの回答はその書き方であり、普通にfor文で処理出来るようになる。
|
|
180
114
|
|
|
@@ -191,6 +125,8 @@
|
|
|
191
125
|
);
|
|
192
126
|
|
|
193
127
|
|
|
128
|
+
|
|
129
|
+
// なんだこの平易なコードは！？
|
|
194
130
|
|
|
195
131
|
const call = async num => {
|
|
196
132
|
|
|
@@ -215,3 +151,7 @@
|
|
|
215
151
|
// 500ms*5の約2.5秒ほど待ってから: [0, 1, 2, 3, 4]
|
|
216
152
|
|
|
217
153
|
```
|
|
154
|
+
|
|
155
|
+
|
|
156
|
+
|
|
157
|
+
このasync版の`call`関数は上記のコードとほぼ同様の動きをしてくれる。
|
1
async/awaitを追加
test
CHANGED
|
@@ -171,3 +171,47 @@
|
|
|
171
171
|
// 500ms*5の約2.5秒ほど待ってから: [0, 1, 2, 3, 4]
|
|
172
172
|
|
|
173
173
|
```
|
|
174
|
+
|
|
175
|
+
|
|
176
|
+
|
|
177
|
+
更にそこからES2017で追加された[async/await](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/async_function)という糖衣構文でPromiseを同期処理っぽく書く事が出来る。
|
|
178
|
+
|
|
179
|
+
Lhankor_Mhyさんの回答はその書き方であり、普通にfor文で処理出来るようになる。
|
|
180
|
+
|
|
181
|
+
|
|
182
|
+
|
|
183
|
+
```JavaScript
|
|
184
|
+
|
|
185
|
+
// やはり長いので500msに
|
|
186
|
+
|
|
187
|
+
const fn1 = num => new Promise(resolve =>
|
|
188
|
+
|
|
189
|
+
setTimeout(() => resolve(num), 500)
|
|
190
|
+
|
|
191
|
+
);
|
|
192
|
+
|
|
193
|
+
|
|
194
|
+
|
|
195
|
+
const call = async num => {
|
|
196
|
+
|
|
197
|
+
const results = [];
|
|
198
|
+
|
|
199
|
+
for (let i = 0; i < 5; i++) {
|
|
200
|
+
|
|
201
|
+
results.push(await fn1(num + i));
|
|
202
|
+
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
return results;
|
|
206
|
+
|
|
207
|
+
};
|
|
208
|
+
|
|
209
|
+
|
|
210
|
+
|
|
211
|
+
call(0).then(console.log);
|
|
212
|
+
|
|
213
|
+
// Promise {<pending>}
|
|
214
|
+
|
|
215
|
+
// 500ms*5の約2.5秒ほど待ってから: [0, 1, 2, 3, 4]
|
|
216
|
+
|
|
217
|
+
```
|