Async/Await入門 resolve()について

前に投稿したこの記事では、Async/Awaitについて必要最低限の解説を行いました。
Javascript初級者がAsync/Awaitが使えるようになる記事

今回はresolveについての解説をします。基本的な解説は↑の記事を参照してください。

resolve()に値を入れるとどうなるか？

const timer=(time)=>{
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve();
        }, time);
    });
 } 
 (async function(){
    $('.春はあけぼの').fadeIn();
    await timer(1000);
    $('.やうやうしろくなりゆく山ぎは').fadeIn();
    await timer(1000);
    $('.すこしあかりて紫だちたる雲のほそくたなびきたる').fadeIn();
 })();

このようなプログラムがあったとします。このプログラムは単純に「１秒後ごとにテキストを表示させていく」というプログラムです。
ここでは、resolve()には何も渡していません。

関数timerの内容を変更しresolve()に"〇秒待ちました"という文字列を渡してみます。

const timer=(time)=>{
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(time+"秒待ちました");
        }, time);
    });
 } 

すると、await timer(1000);が"1秒待ちました"という文字を返すようになります。

const result = await timer(1000);
console.log(result);

結果
>> 1秒待ちました

となると思います。（補足としてtypescriptの場合new Promise<string>(～とすると、resultの型がstringになります。）

また、Promise文で書き直すと

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

となり、次のthenで文字列を引き取ることになります。

何が嬉しいのか？

先ほど、例だと'1秒待ちました'という文字列が返されますが、何も嬉しくないと思います。
これはファイルやapiなどのアクセスをjs上で行う時に特に役に立ちます。

例えば、

$.get( "./枕草子.txt");

こういう処理をしたとします。$.getはjQueryのgetメソッドであり、指定パスのファイルを取得するためのメソッドです(素のjsだと面倒くさいのでjquery使ってます)

async/awaitを何も考えずに処理をすると、第二引数にコールバックが用意されているので、

$.get( "./枕草子.txt",(txt)=>{
    console.log(txt);
});

となると思います。ですが、$.getの戻り値はPromiseなので、async/awaitを用いると

const result = await $.get( "./枕草子.txt");

とすることができます。これをconsole.log(result)すると、
>> 春はあけぼのやうやう白くなりゆく山ぎわ～～
となると思います。

こういった処理ができるのが、嬉しいところです。

これは、$.getが具体的にどんな処理をしているかは分かりませんが

$.get = (filePath)=>{
    return new Promise((resolve,reject)=>{
        const file = yomikomi(filePath);
        resolve(file);
    });
}

みたいな感じで、resolve()にファイルを入れているので、await $.get( "./枕草子.txt");の戻り値としてファイルの結果を取得できるのです。

関連記事

Javascript初級者がAsync/Awaitが使えるようになる記事
Async/Await入門 resolve()の引数に値を入れよう