teratail
回答率
85.48%
質問するログイン新規登録
トップJavaScriptに関する質問promiseをasyncに書き換える方法

編集履歴

回答編集履歴

13

くどい言い回しを修正

2022/03/06 04:51

投稿

shiracamus
shiracamus

スコア5406

test CHANGED
@@ -1,5 +1,5 @@
1
1
  コード2は以下のように書いたのと同等です。
2
- sampleResolve関数自体では何も return していないので、関数の復帰値は `undefined` をresolveしたPromiseになり、sampleResolveの呼び出しをawaitすると即復帰して `undefined` が返ります。
2
+ sampleResolve関数自体では何も return していないので、関数の復帰値は `undefined` をresolveしたPromiseになり、sampleResolve呼出しをawaitすると即復帰して `undefined` が返ります。
3
3
  sampleResolve関数からPromiseを返すと、await時にそのPromiseのresolvかrejectが呼ばれるまで待ってくれます。
4
4
 
5
5
  ```js

12

説明修正

2022/03/06 03:56

投稿

shiracamus
shiracamus

スコア5406

test CHANGED
@@ -1,5 +1,5 @@
1
1
  コード2は以下のように書いたのと同等です。
2
- sampleResolve関数自体では何も return していないので、関数の復帰値は `undefined` をresolveしたPromiseになり、sampleResolveの呼び出しをawaitすると即復帰して `return: undefined` が表示されます。
2
+ sampleResolve関数自体では何も return していないので、関数の復帰値は `undefined` をresolveしたPromiseになり、sampleResolveの呼び出しをawaitすると即復帰して `undefined` が返ります。
3
3
  sampleResolve関数からPromiseを返すと、await時にそのPromiseのresolvかrejectが呼ばれるまで待ってくれます。
4
4
 
5
5
  ```js

11

説明修正

2022/03/06 03:34

投稿

shiracamus
shiracamus

スコア5406

test CHANGED
@@ -1,6 +1,6 @@
1
1
  コード2は以下のように書いたのと同等です。
2
2
  sampleResolve関数自体では何も return していないので、関数の復帰値は `undefined` をresolveしたPromiseになり、sampleResolveの呼び出しをawaitすると即復帰して `return: undefined` が表示されます。
3
- sampleResolve関数からPromiseを返すと、復帰値はそのPromiseとなり、await時にPromiseのresolvかrejectが呼ばれるまで待ってくれます。
3
+ sampleResolve関数からPromiseを返すと、await時にそのPromiseのresolvかrejectが呼ばれるまで待ってくれます。
4
4
 
5
5
  ```js
6
6
  async function sampleResolve(value) {

10

コードエスケープ

2022/03/06 03:30

投稿

shiracamus
shiracamus

スコア5406

test CHANGED
@@ -16,7 +16,7 @@
16
16
  ```
17
17
 
18
18
  以下のようにsetTimeoutをPromiseで包んでawaitすれば、sampleResolve関数からはpending状態（await中）のPromiseが返ります。
19
- setTimeoutが2秒後にresolveを呼ぶことにより sampleResolve関数内の await が終わり、return "Hello" によってsampleResolve関数が返した Promise の `resolve("Hello")` が呼ばれて resolve状態になり、外部のawaitが終わって`"Hello"`が返り、開始から2秒後に `return: Hello` が表示されます。
19
+ setTimeoutが2秒後にresolveを呼ぶことにより sampleResolve関数内の await が終わり、`return "Hello"` によってsampleResolve関数が返した Promise の `resolve("Hello")` が呼ばれて resolve状態になり、外部のawaitが終わって`"Hello"`が返り、開始から2秒後に `return: Hello` が表示されます。
20
20
 
21
21
  ```js
22
22
  async function sampleResolve(value) {

9

説明修正

2022/03/06 03:26

投稿

shiracamus
shiracamus

スコア5406

test CHANGED
@@ -16,7 +16,7 @@
16
16
  ```
17
17
 
18
18
  以下のようにsetTimeoutをPromiseで包んでawaitすれば、sampleResolve関数からはpending状態（await中）のPromiseが返ります。
19
- setTimeoutが2秒後にresolveを呼ぶことにより sampleResolve関数内の await が終わり、return "Hello" によってsampleResolve関数が返した Promise が resolve状態になり、外部のawaitが終わり、開始から2秒後に `return: Hello` が表示されます。
19
+ setTimeoutが2秒後にresolveを呼ぶことにより sampleResolve関数内の await が終わり、return "Hello" によってsampleResolve関数が返した Promise の `resolve("Hello")` が呼ばれて resolve状態になり、外部のawaitが終わって`"Hello"`が返り、開始から2秒後に `return: Hello` が表示されます。
20
20
 
21
21
  ```js
22
22
  async function sampleResolve(value) {

8

句点追加

2022/03/06 03:20

投稿

shiracamus
shiracamus

スコア5406

test CHANGED
@@ -15,8 +15,8 @@
15
15
  })();
16
16
  ```
17
17
 
18
- 以下のようにsetTimeoutをPromiseで包んでawaitすれば、sampleResolve関数からはpending状態(await中)のPromiseが返ります。
18
+ 以下のようにsetTimeoutをPromiseで包んでawaitすれば、sampleResolve関数からはpending状態（await中）のPromiseが返ります。
19
- setTimeoutが2秒後にresolveを呼ぶことにより sampleResolve関数内の await が終わり、return "Hello" によってsampleResolve関数が返した Promise が resolve状態になり、外部のawaitが終わって開始から2秒後に `return: Hello` が表示されます。
19
+ setTimeoutが2秒後にresolveを呼ぶことにより sampleResolve関数内の await が終わり、return "Hello" によってsampleResolve関数が返した Promise が resolve状態になり、外部のawaitが終わり、開始から2秒後に `return: Hello` が表示されます。
20
20
 
21
21
  ```js
22
22
  async function sampleResolve(value) {

7

説明変更

2022/03/06 02:56

投稿

shiracamus
shiracamus

スコア5406

test CHANGED
@@ -1,6 +1,6 @@
1
1
  コード2は以下のように書いたのと同等です。
2
- sampleResolve関数自体では何も return していないので、関数の復帰値は undefined になり、sampleResolveの呼び出しをawaitした結果は即undefinedになります。
2
+ sampleResolve関数自体では何も return していないので、関数の復帰値は `undefined` をresolveしたPromiseになり、sampleResolveの呼び出しをawaitすると即復帰して `return: undefined` が表示されます。
3
- sampleResolve関数からPromiseを返すと、await時にPromiseのresolvかrejectが呼ばれるまで待ってくれます。
3
+ sampleResolve関数からPromiseを返すと、復帰値はそのPromiseとなり、await時にPromiseのresolvかrejectが呼ばれるまで待ってくれます。
4
4
 
5
5
  ```js
6
6
  async function sampleResolve(value) {
@@ -15,7 +15,8 @@
15
15
  })();
16
16
  ```
17
17
 
18
- 以下のようにsetTimeoutをPromiseで包んでawaitすれば、2秒後に Hello が表示されます。
18
+ 以下のようにsetTimeoutをPromiseで包んでawaitすれば、sampleResolve関数からはpending状態(await中)のPromiseが返ります。
19
+ setTimeoutが2秒後にresolveを呼ぶことにより sampleResolve関数内の await が終わり、return "Hello" によってsampleResolve関数が返した Promise が resolve状態になり、外部のawaitが終わって開始から2秒後に `return: Hello` が表示されます。
19
20
 
20
21
  ```js
21
22
  async function sampleResolve(value) {

6

説明補足

2022/03/06 02:44

投稿

shiracamus
shiracamus

スコア5406

test CHANGED
@@ -15,7 +15,7 @@
15
15
  })();
16
16
  ```
17
17
 
18
- 以下のようにsetTimeoutをPromiseで包んでawaitすれば Hello が表示されます。
18
+ 以下のようにsetTimeoutをPromiseで包んでawaitすれば、2秒後に Hello が表示されます。
19
19
 
20
20
  ```js
21
21
  async function sampleResolve(value) {

5

改善例を追記

2022/03/06 02:43

投稿

shiracamus
shiracamus

スコア5406

test CHANGED
@@ -1,6 +1,5 @@
1
1
  コード2は以下のように書いたのと同等です。
2
- setTimeout関数を呼んですぐに復帰することが理解できるのではないでしょうか？
3
- sampleResolve関数自体では何も return していないので、関数の復帰値は undefined になり、sampleResolveの呼び出しをawaitした結果はundefinedになります。
2
+ sampleResolve関数自体では何も return していないので、関数の復帰値は undefined になり、sampleResolveの呼び出しをawaitした結果は即undefinedになります。
4
3
  sampleResolve関数からPromiseを返すと、await時にPromiseのresolvかrejectが呼ばれるまで待ってくれます。
5
4
 
6
5
  ```js
@@ -16,3 +15,16 @@
16
15
  })();
17
16
  ```
18
17
 
18
+ 以下のようにsetTimeoutをPromiseで包んでawaitすれば Hello が表示されます。
19
+
20
+ ```js
21
+ async function sampleResolve(value) {
22
+ await new Promise(resolve => setTimeout(resolve, 2000));
23
+ return value;
24
+ }
25
+
26
+ (async function() {
27
+ console.log('return:', await sampleResolve("Hello"));
28
+ })();
29
+ ```
30
+

4

説明追記

2022/03/06 02:37

投稿

shiracamus
shiracamus

スコア5406

test CHANGED
@@ -1,6 +1,7 @@
1
1
  コード2は以下のように書いたのと同等です。
2
2
  setTimeout関数を呼んですぐに復帰することが理解できるのではないでしょうか？
3
3
  sampleResolve関数自体では何も return していないので、関数の復帰値は undefined になり、sampleResolveの呼び出しをawaitした結果はundefinedになります。
4
+ sampleResolve関数からPromiseを返すと、await時にPromiseのresolvかrejectが呼ばれるまで待ってくれます。
4
5
 
5
6
  ```js
6
7
  async function sampleResolve(value) {

3

復帰値を表示する処理を追記

2022/03/06 02:30

投稿

shiracamus
shiracamus

スコア5406

test CHANGED
@@ -1,6 +1,6 @@
1
1
  コード2は以下のように書いたのと同等です。
2
2
  setTimeout関数を呼んですぐに復帰することが理解できるのではないでしょうか？
3
- sampleResolve関数自体では何も return していないので、関数の復帰値は undefined になり、sampleResolveの呼び出しをawaitした結果がundefinedになります。
3
+ sampleResolve関数自体では何も return していないので、関数の復帰値は undefined になり、sampleResolveの呼び出しをawaitした結果はundefinedになります。
4
4
 
5
5
  ```js
6
6
  async function sampleResolve(value) {
@@ -9,5 +9,9 @@
9
9
  }
10
10
  setTimeout(callback, 2000);
11
11
  }
12
+
13
+ (async function() {
14
+ console.log('return:', await sampleResolve("Hello"));
15
+ })();
12
16
  ```
13
17
 

2

復帰値に関する説明を追記。

2022/03/06 02:28

投稿

shiracamus
shiracamus

スコア5406

test CHANGED
@@ -1,5 +1,6 @@
1
1
  コード2は以下のように書いたのと同等です。
2
2
  setTimeout関数を呼んですぐに復帰することが理解できるのではないでしょうか？
3
+ sampleResolve関数自体では何も return していないので、関数の復帰値は undefined になり、sampleResolveの呼び出しをawaitした結果がundefinedになります。
3
4
 
4
5
  ```js
5
6
  async function sampleResolve(value) {

1

関数定義変更

2022/03/06 02:25

投稿

shiracamus
shiracamus

スコア5406

test CHANGED
@@ -3,7 +3,7 @@
3
3
 
4
4
  ```js
5
5
  async function sampleResolve(value) {
6
- function callback() {
6
+ const callback = () => {
7
7
  return value;
8
8
  }
9
9
  setTimeout(callback, 2000);