マンガでわかるJavaScriptのPromise

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

第6話「Promiseを使ったコード」3　ドキュメント

ドキュメント

コード1

　コールバック関数の例です。

ソースコード）コールバック関数の例

setTimeout(function() {
    console.log('完了');
}, 1000);

コード2

　「Promise」と「then」の例です。

ソースコード）「Promise」と「then」の例

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

出力）実行結果

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

コラム：MDN

　JavaScriptの仕様を確認するにはMDNが便利です。MDNは、『Mozilla Firefox』を出しているMozilla Foundationの、Web開発者用の文書サイトです。HTMLやJavaScript、CSSといったWebの仕様がまとまっています。

リンク）MDN Web Docs

https://developer.mozilla.org/ja/

リンク）JavaScript | MDN

https://developer.mozilla.org/ja/docs/Web/JavaScript

　「Promise」についても情報がまとまっていますので、機会があれば目を通しておくとよいです。

リンク）Promise - JavaScript | MDN

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise

リンク）プロミスの使用 - JavaScript | MDN

https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Using_promises

コンテンツ紹介

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