質問編集履歴
1
コードの間違い
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -204,6 +204,58 @@
|
|
|
204
204
|
|
|
205
205
|
1つ目：2番と3番の処理を1つにまとめる
|
|
206
206
|
|
|
207
|
+
結果：2番と3番が同期処理されてしまう。
|
|
208
|
+
|
|
209
|
+
```javascript
|
|
210
|
+
|
|
211
|
+
async fetchProduct(){
|
|
212
|
+
|
|
213
|
+
this.loading = true;//1.ローディング表示
|
|
214
|
+
|
|
215
|
+
const exec = async ()=>{
|
|
216
|
+
|
|
217
|
+
await this.execRegister();//2.登録商品取得処理呼び出し
|
|
218
|
+
|
|
219
|
+
await this.execBuy();//3.購入商品取得処理呼び出し
|
|
220
|
+
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
await exec();
|
|
224
|
+
|
|
225
|
+
this.loading = false;//4.ローディング非表示
|
|
226
|
+
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
```
|
|
230
|
+
|
|
231
|
+
2つ目：2番と3番の処理のawaitを指定しない
|
|
232
|
+
|
|
233
|
+
結果：2番と3番の処理は並行(非同期)で行われるが終わる前に4番の処理が行われる。
|
|
234
|
+
|
|
235
|
+
```javascript
|
|
236
|
+
|
|
237
|
+
async fetchProduct(){
|
|
238
|
+
|
|
239
|
+
this.loading = true;//1.ローディング表示
|
|
240
|
+
|
|
241
|
+
const exec = async ()=>{
|
|
242
|
+
|
|
243
|
+
this.execRegister();//2.登録商品取得処理呼び出し
|
|
244
|
+
|
|
245
|
+
this.execBuy();//3.購入商品取得処理呼び出し
|
|
246
|
+
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
await exec();
|
|
250
|
+
|
|
251
|
+
this.loading = false;//4.ローディング非表示
|
|
252
|
+
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
```
|
|
256
|
+
|
|
257
|
+
3つ目：４番の処理にasyncを指定する
|
|
258
|
+
|
|
207
259
|
結果：2番と3番の処理が終わる前に4番の処理が行われる。
|
|
208
260
|
|
|
209
261
|
```javascript
|
|
@@ -220,66 +272,14 @@
|
|
|
220
272
|
|
|
221
273
|
}
|
|
222
274
|
|
|
275
|
+
const exec2 = async ()=>{
|
|
276
|
+
|
|
277
|
+
this.loading = false;//4.ローディング非表示
|
|
278
|
+
|
|
279
|
+
}
|
|
280
|
+
|
|
223
281
|
await exec();
|
|
224
282
|
|
|
225
|
-
this.loading = false;//4.ローディング非表示
|
|
226
|
-
|
|
227
|
-
}
|
|
228
|
-
|
|
229
|
-
```
|
|
230
|
-
|
|
231
|
-
2つ目：2番と3番の処理のawaitを指定しない
|
|
232
|
-
|
|
233
|
-
結果：2番と3番の処理は並行(非同期)で行われるが終わる前に4番の処理が行われる。
|
|
234
|
-
|
|
235
|
-
```javascript
|
|
236
|
-
|
|
237
|
-
async fetchProduct(){
|
|
238
|
-
|
|
239
|
-
this.loading = true;//1.ローディング表示
|
|
240
|
-
|
|
241
|
-
const exec = async ()=>{
|
|
242
|
-
|
|
243
|
-
this.execRegister();//2.登録商品取得処理呼び出し
|
|
244
|
-
|
|
245
|
-
this.execBuy();//3.購入商品取得処理呼び出し
|
|
246
|
-
|
|
247
|
-
}
|
|
248
|
-
|
|
249
|
-
await exec();
|
|
250
|
-
|
|
251
|
-
this.loading = false;//4.ローディング非表示
|
|
252
|
-
|
|
253
|
-
}
|
|
254
|
-
|
|
255
|
-
```
|
|
256
|
-
|
|
257
|
-
3つ目：４番の処理にasyncを指定する
|
|
258
|
-
|
|
259
|
-
結果：2番と3番の処理が終わる前に4番の処理が行われる。
|
|
260
|
-
|
|
261
|
-
```javascript
|
|
262
|
-
|
|
263
|
-
async fetchProduct(){
|
|
264
|
-
|
|
265
|
-
this.loading = true;//1.ローディング表示
|
|
266
|
-
|
|
267
|
-
const exec = async ()=>{
|
|
268
|
-
|
|
269
|
-
await this.execRegister();//2.登録商品取得処理呼び出し
|
|
270
|
-
|
|
271
|
-
await this.execBuy();//3.購入商品取得処理呼び出し
|
|
272
|
-
|
|
273
|
-
}
|
|
274
|
-
|
|
275
|
-
const exec2 = async ()=>{
|
|
276
|
-
|
|
277
|
-
this.loading = false;//4.ローディング非表示
|
|
278
|
-
|
|
279
|
-
}
|
|
280
|
-
|
|
281
|
-
await exec();
|
|
282
|
-
|
|
283
283
|
await exec2();
|
|
284
284
|
|
|
285
285
|
}
|