マンガでわかるJavaScriptのPromise

第8話「resolveの引数」

今回は「resolve」の引数について説明します。

コード1

 「resolve」を使って、処理の結果を渡す「timerB」関数です。

ソースコード)処理の結果を渡す

const timerB = time => new Promise(resolve => {
    setTimeout(() => {
        resolve(`end: ${time}`);
    }, time);
});

timerB(500)
.then(val => {
    console.log(val);
});

    

出力)実行結果

end: 500

    

コラム:HTMLを表示 1

 「Promise」の値を利用する実例を示します。Webブラウザのコンソールから実行するもので、「fetch」関数を利用して、現在のWebページのHTMLを通信で取得して、表示します。

(「Google Chrome」でコンソールを開くには、Webページ上で右クリックして「検証」を選びます。そして「コンソール」(Console)タブを選びます)

 適当なWebページを開いてコンソールを表示したら、以下のコードを入力して[Enter]キーを押します。すると通信でHTMLを取得し、タグの末尾で改行して表示します。

ソースコード)「fetch」関数の利用

fetch(location.href)
.then(response => {
    if (! response.ok) { return '' }
    return response.text();
})
.then(text => {
    console.log(text.replace(/>/g, '>\n'));
});

    

 以下は「fetch」について書いてあるMDNのページです。

リンク)WindowOrWorkerGlobalScope.fetch() - Web API | MDN
作成:2022/07/21  更新:2022/07/21  [Permalink]

クロクロ・ショップ
特殊な技術書多数あります
レトロ風RPG フルスクラッチ開発 全コード
レトロゲーム風RPGの全コードを掲載して解説した本
HTML5とJavaScriptで作る 落ち物パズルゲーム 全コード
『テトリス』や『ぷよぷよ』に類似した落ち物パズルゲームの全コードを掲載して解説した本
JavaScriptでリバーシゲームをつくろう
ライブラリを使わずに全コードを書いて、リバーシゲームを作るまでを徹底解説
ワールドマップ自動生成読本
二次元ゲームのワールドマップを自動生成するための本
レトロゲームファクトリー
過去のゲームを最新機に移植する会社のお仕事小説(新潮社)
顔貌売人 ハッカー探偵 鹿敷堂桂馬
プログラマーが探偵役のエンタメ・ミステリー第2弾 最先端の情報犯罪に安藤と鹿敷堂が挑みます(文藝春秋)
裏切りのプログラム ハッカー探偵 鹿敷堂桂馬
プログラマー鹿敷堂桂馬が、女性社長の安藤裕美と共に、IT業界で起きた事件に挑む。2016年の松本清張賞の最終候補作(文藝春秋)
×