3

お世話になっています。
タイトルのとおりなのですが、以下に示したようなコードをasync/awaitで同じ処理をするように書き換えることはできますか?

function hello(){
    return new Promise((resolve,reject) => {
        setTimeout(() => {
            resolve('hello');
        },2000);
    });
}

hello().then((result) => {
    console.log(result);
});

自分で調べてみて「おそらくできないのではないか」と結論付けたのですが、「もしかしたらできるのでは、、?」などとも考えてしまい、質問させていただきました。
初歩的な質問かもしれませんが教えて頂けると嬉しいです、よろしくお願い致します。

2 件の回答 2

3

お考えの通り、async/awaitでこれを書き換えることはできません。

特にhello関数に関しては、このようにコールバック関数による非同期処理をPromiseに変換する目的でnew PromiseでPromiseを作る場合は、これをasync関数に書き換えることはできません。hello関数はこのように書くほか無いと思います。

プログラムの後半部分に関しても、async関数のの中でない場所ではawaitを使用できないので、hello()の結果を待つためにはこのようにthenを使用する必要があります。


ただし、将来的にtop-level awaitがJavaScriptに導入される予定であり、これが導入されれば後半部分を次のように書き換えることができるようになります。

const result = await hello();
console.log(result);

top-level awaitは、「async関数の中」以外に「モジュールのトップレベル」にもawaitを書くことができるようになるという機能です。モジュールのトップレベルというのは、モジュールであるJavaScriptファイルの一番外側、つまり他の関数の中ではない場所です。

1
1

一度 async で囲うと可能です。

Topレベルでいきなり await をつかうのは Faily Feelyさんも書かれている通り、今のところ不可能だと思います。

asyncで囲った例は下記です。

function hello(){
  return new Promise((resolve,reject) => {
      setTimeout(() => {
          resolve('hello');
      },2000);
  });
}

async function hoge() {
  result = await hello()
  console.log(result)
}

hoge()

無名関数で即時実行させる場合

名前を考えるのが手間で、無名関数を使いたい場合は下記の書き方もできます。

function hello(){
  return new Promise((resolve,reject) => {
      setTimeout(() => {
          resolve('hello');
      },2000);
  });
}

(async function() {
  result = await hello()
  console.log(result)
})();

参考資料

参考資料としては、
こちらのドキュメントがご質問の内容とほぼ同じようなソースとなっているかと思います。

async function - JavaScript | MDN

引用

function resolveAfter2Seconds() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('resolved');
    }, 2000);
  });
}

async function asyncCall() {
  console.log('calling');
  const result = await resolveAfter2Seconds();
  console.log(result);
  // expected output: 'resolved'
}

asyncCall();

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。