Naoki23
@Naoki23 (早稲田 直輝)

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

async関数からの戻り値をthenで別の変数に代入した後その変数を出力したい

Q&A

Closed

解決したいこと

async関数からの戻り値をthenで別の変数に代入した後その変数を出力したいのですが、出力がundefinedとなってしまいます。
thenの中ではなく外で出力したいです。
どうすればいいでしょうか?

該当するソースコード

let hoge;
fuga().then((val) => {
  hoge = val;
});
console.log(hoge);

試したこと

let hoge;
fuga().then((val) => {
  hoge = val;
  console.log(hoge);
});

上ようにしたらhogeの値は表示されました。

0

3Answer

async関数とは非同期を扱うものです。
非・同期ということは同期でない。つまりいつ終わるかわからないものを扱います。
いつ終わるかわからないからと言って処理を止めてたら待っている間、画面が固まったりするので、そういったものは後回しにしておいて待っている間は他の処理を行い、終わったらその続きの処理を行おうという考え方です。
thenメソッドの中はいつ終わるのかわからないものが終わったら実行されます。
console.log(hoge)はいつ終わるかわからない処理を待っている間に実行されます。

この場合の対処法は、
async awaitを利用すると本来実現したいことと似たようなことはできます。

awaitするには何かしらの関数に入れなければなりません。

(async () => {
   let hoge;
   hoge = await fuga(); // fugaが終了するまで待つ
   console.log(hoge);
})();

または

async function test() {
   let hoge;
   hoge = await fuga(); // fugaが終了するまで待つ
   console.log(hoge);
}
test();

こちらの方が詳しく説明してくださっているのでご覧になってみてください!

2Like

できません。 Promise は非同期に実行されるので、 .then() で登録した関数はいつ呼ばれるか分からないからです(少なくとも現在のイベントループ完了前には呼ばれない、つまり同期的には呼ばれないことが仕様で保証されています)。

let hoge;

// ここで fuga() は Promise オブジェクトを返す。
// Promise に対して .then() を呼んで、 Promise 成功時に実行する関数を登録する。
fuga().then((val) => { hoge = val; });

// まだ (val) => { hoge = val; } は呼ばれていない。
console.log(hoge); // => undefined

// (val) => { hoge = val; } が呼ばれるタイミングは必ずこれ以降になる。いつかは分からない。

.then() で登録した関数に続けて何かを実行したい場合には、 .then() をチェーンして書くことができます。このとき、先に登録した関数の返り値が次の関数の引数として渡されます。

fuga().then((val) => val).then((hoge) => console.log(hoge));
1Like

@uasi さん、@Remrem さん
丁寧な説明ありがとうございます。
@Remrem さんが書いてくださったコードでひとまずやりたいことはできそうです。ありがとうございました!

0Like

Your answer might help someone💌