Help us understand the problem. What is going on with this article?

【JavaScript】非同期処理の書き方 async/await編

【JavaScript】非同期処理の書き方 Promise編に引き続き、JavaScriptでの非同期処理について書きます。
今回はPromiseをより簡潔に書けるようにES2017で導入されたasync/awaitについて書きます

asyncとは何か?

非同期関数を定義する関数定義です。
async function で非同期関数を定義できます。
async function は Promise インスタンスを返却します。

async function sample(){
return 'Hello World!!';
}

上記の例で定義した sample は、Promiseで書くと以下の様になります。

function sample() {
  return new Promise((resolve, reject) => {
    resolve('Hello World!!');
  });
}

asyncの利用例

async function で定義された関数内でreturnされると、そのreturnの返り値で Promise.resolveもしくはreject が実行される為、.then()や.catch()でreturnの値を受け取ることができます。

async function resolveSample() {
          return "sample was resolved!";
        }
        async function rejectSample() {
          // reject を呼ぶ
          return Promise.reject(new Error("エラーです..."));
        }
        async function throwSample() {
          throw new Error("エラーが発生");
        }

        resolveSample().then((value) => {
          console.log(value); 
        });
        // 実行結果 =>sample was resolved!

        rejectSample().catch((error) => {
          console.log(error.message);
        });
        // 実行結果 => エラーです...

        // catch() で例外処理を行える
        throwSample().catch((error) => {
          console.log(error.message);
        }); // => エラーが発生

awaitとは何か?

async function内でPromiseの結果(resolve、reject)が返されるまで処理を一時停止する演算子のことです。awaitはasync function で利用することが出来ます。

async/awaitを使って非同期処理を書く

【JavaScript】非同期処理の書き方 Promise編で書いた以下の処理を実際にasync/awaitを使って書いていきます。
Screen Recording 2020-11-15 at 10.23.33.mov.gif

以下は前回↑の処理をasync/awaitを使わないで書いた処理です。

///(async/awaitを使わない処理)
            const getRelated = publisher =>{
                return new Promise((resolve, reject) =>{
                    setTimeout(pub =>{
                        const recipe = { title: 'Ramen', publisher: 'Tony' }
                        resolve(`${pub}: ${recipe.title}`);
                    }, 2000, publisher);
                });
            };

            const getIDs = new Promise((resolve, reject) =>{
                setTimeout(() =>{
                    resolve([523, 883, 473, 974]);
                }, 1500);
            });

            const getRecipe = recId =>{
                return new Promise((resolve, reject) =>{
                    setTimeout(ID =>{
                        const recipe = { title: 'Udon', publisher: 'Taro' };
                        resolve(`${ID}: ${recipe.title}`)
                    }, 2000, recId);
                });
            };

            getIDs
            .then(IDs => {
                console.log(IDs);
                return getRecipe(IDs[2]);
            })
            .then(recipe => {
                console.log(recipe);
                return getRelated('Tony');
            })
            .then(recipe => {
                console.log(recipe);
            })

次はasync/awaitを使って書いた処理です。

///(async/awaitを使った処理)
        const getRelated = (publisher) => {
          return new Promise((resolve, reject) => {
            setTimeout(
              (pub) => {
                const recipe = { title: "Ramen", publisher: "Tony" };
                resolve(`${pub}: ${recipe.title}`);
              },
              2000,
              publisher
            );
          });
        };

        const getIDs = new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve([523, 883, 473, 974]);
          }, 1500);
        });

        const getRecipe = (recID) => {
          return new Promise((resolve, reject) => {
            setTimeout(
              (IDs) => {
                const recipe = { title: "Udon", publisher: "Taro" };
                resolve(`${IDs}: ${recipe.title}`);
              },
              2000,
              recID
            );
          });
        };
async function getRecipesAW() {
          const IDs = await getIDs;
          console.log(IDs);
          const recipe = await getRecipe(IDs[2]);
          console.log(recipe);
          const related = await getRelated("Tony");
          console.log(related);

          return recipe;
        }
        getRecipesAW();

async/awaitを使うことでコードを簡潔に書くことが出来ます。

参考

MDN web docs 非同期関数

t_t238
新卒1年目のSEです。 アウトプットの場として週1で投稿していきます。
trust-coms
トラストはICTソリューションサービス、システム開発サービスを提供し、お客様との信頼関係の中で磨かれ成長するソフトウェアメーカーです。 ※各記事はすべて個人の見解であり、株式会社トラストの公式見解ではありません。
https://trust-coms.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away