JavaScript Promiseを使った非同期処理の実装方法 

JavaScriptのPromiseオブジェクトを使った非同期処理の実装方法について解説します。

非同期処理をするにはどうしたらいいですか?

非同期処理をするにはPromiseオブジェクトを使うのが簡単です。Promiseオブジェクトを使った非同期処理の実装方法について紹介しましょう。

目次

受講者数No.1!初心者からプロへ導く信頼のスクール

    短期間で習得可能!未経験から実践力を磨く充実のプログラム

    今なら無料相談でAmazonギフトカードがもらえる!

    非同期処理をするための「Promiseオブジェクト」

    非同期処理をするためには、Promiseオブジェクトを使用することができます。Promiseオブジェクトは非同期処理を行うために必要なメソッドやプロパティを持っています。

    Promiseオブジェクトを使用するためには、new演算子を使用してインスタンスを生成します。その後、thenメソッドやcatchメソッドを使用して処理を実装します。

    new Promise((resolve, reject) => { 処理本体 })
    …resolve:処理が成功したときの通知する関数
    …reject:処理が失敗した時の通知する関数

    以下はPromiseオブジェクトを使用した非同期処理のサンプルです。

    const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
    
    delay(3000)
      .then(() => console.log('3秒経過しました!'))
      .catch((error) => console.log(error));

    上記のサンプルでは、3秒後に「3秒経過しました!」と表示する処理をPromiseオブジェクトを使用して実装しています。

    then-catch-finallyメソッドについて

    then / catch / finally 三つのメソッドはPromiseオブジェクトにおいて非同期処理の結果に対して処理を定義するために使用します。

    メソッド説明サンプル
    then非同期処理が成功した際に実行される処理を定義します。delay(3000).then(() => console.log(‘3秒経過しました!’))
    catch非同期処理が失敗した際に実行される処理を定義します。delay(3000).catch((error) => console.log(error))
    finally非同期処理が成功したか失敗したかに関わらず、最後に実行される処理を定義します。delay(3000).finally(() => console.log(‘非同期処理を終了しました’))
    • thenメソッドは非同期処理が成功した場合に実行されます。thenメソッドには、非同期処理が成功した際に実行される関数を引数として渡します。
    • catchメソッドは非同期処理が失敗した場合に実行されます。catchメソッドには、非同期処理が失敗した際に実行される関数を引数として渡します。
    • finallyメソッドは非同期処理が成功したか失敗したかに関わらず、最後に実行される処理を定義します。finallyメソッドには、非同期処理が終了した際に実行される関数を引数として渡します。

    上記の三つのメソッドを組み合わせて使用することで、非同期処理の結果に応じて適切な処理を実行することができます。

    const delay = (ms) => new Promise((resolve, reject) => setTimeout(setTimeout(() => {
        if (ms > 2000) {
          resolve();
        } else {
          reject(new Error('Delay time is too short'));
        }
        }, ms));
        
        delay(3000)
        .then(() => console.log('3秒経過しました!'))
        .catch((error) => console.log(error))
        .finally(() => console.log('非同期処理を終了しました'));

    上記のサンプルでは、3000ms後にresolve()が呼ばれるようにsetTimeoutを使用しています。

    3000ms以上ならばthenメソッド、そうでない場合はcatchメソッドが呼ばれます、最後にfinallyメソッドが呼ばれます。

    リスキリングでキャリアアップしてみませんか?

    リスキリング(学び直し)は、経済産業省が推奨しており、

    今だけ、最大70%のキャッシュバックを受けることができます。

    リスキリング 給付金が出るスクール紹介

    最大70%の給付金が出るおすすめのプログラミングスクール!

    国策で予算が決められているため申し込みが多い場合は早期に終了する可能性があります!

    興味のある方はすぐに確認しましょう。

    まとめ

    「Promiseを使った非同期処理の実装方法」を以下にまとめます。

    • JavaScriptで非同期処理をするためにはPromiseオブジェクトを使用する。
    • Promiseオブジェクトを生成するにはnew演算子を使用する。
    • then / catch / finallyメソッドを使用して、非同期処理の結果に応じた処理を定義する。

    Promiseオブジェクトとthen / catch / finallyメソッドを使用することで、簡単に非同期処理を実装することができるようになりました。

    Promiseオブジェクトを使用する際には、then / catch / finallyメソッドを組み合わせて使用することで、非同期処理の結果に応じて適切な処理を実行することができます。

    また、catchメソッドを使用して、非同期処理が失敗した際の処理を定義することで、アプリケーションのクラッシュを防ぐことができます。

    よかったらシェアしてね!
    • URLをコピーしました!
    • URLをコピーしました!

    コメント

    コメントする

    CAPTCHA


    目次