マンガでわかるJavaScriptのPromise

Xにポスト X@ruten 開発支援 開発/執筆依頼
公開：2024-11-15、更新：2024-11-15

第7話「Promiseを使ったコード 2」4　ドキュメント

ドキュメント

コード1

　「time」「text」を引数にした「timer()」関数です。

ソースコード）引数付きの「timer()」関数

const timer = function(time, text) {
    return new Promise(function(resolve) {
        setTimeout(function() {
            console.log(text);
            resolve();
        }, time);
    });
};

コード2

　先ほどの関数を、アロー関数で短く書き、実際に使用します。

ソースコード）短く書いて実際に利用

const timer = (time, text) => new Promise(resolve => {
    setTimeout(() => {
        console.log(text);
        resolve();
    }, time);
});

timer(500, '処理1')
.then(function() {
    return timer(600, '処理2');
})
.then(function() {
    return timer(700, '処理3');
})
.then(function() {
    return timer(800, '処理4');
})
.then(function() {
    console.log('終了');
});

コード3

　「Promise」を利用した処理を、アロー関数で短く書き、さらに短く記述します。

ソースコード）さらに短く書いて実際に利用

const timer = (time, text) => new Promise(resolve => {
    setTimeout(() => {
        console.log(text);
        resolve();
    }, time);
});

timer(500, '処理1')
.then(() => timer(600, '処理2'))
.then(() => timer(700, '処理3'))
.then(() => timer(800, '処理4'))
.then(() => console.log('終了'));

出力）実行結果

処理1
処理2
処理3
処理4
終了

コンテンツ紹介

この連載をまとめて 無料の電子書籍で読む PDF＋コードをDLする
他のマンガも見る（マンガまとめページ）
コンテンツを全て見る
コンテンツを全て見る
Webサイトのトップに移動
トップページに戻る
Cronus Crown（クロノス・クラウン）のトップページに戻る
(c)2002-2025 Cronus Crown　(c)1997-2025 Masakazu Yanai
ご意見・お問い合わせはサイト情報 弊社への連絡までお願いします
個人情報の取り扱い、利用者情報の外部送信について