【JavaScript】「Promiseとthen」を使ったコードを「Promiseとasyncとawait」を使ったコードに書き換える

「Promiseとthen」を使ったコードを「Promiseとasyncとawait」を使ったコードに書き換える。
サンプルは次がようになる。
重要なとこは「new Promise」にはコールバック関数「resolve」とコールバック関数「reject」を渡すこと。「Promiseとthen」を使ったコードはthenを使わずに「Promiseとasync/await」を使ったコードに書き換えることができること。
「Promiseとthen」と「Promiseとasync/await」は連続する非同期処理のチェーンを簡単に扱うための仕組みである。なので、非同期処理のチェーンのサンプルを用意した。

//Promiseとthenを使ったサンプルコード1
const promise = new Promise((resolve, reject) => resolve("Hello 1")); // Promiseを作成し、終了する
promise.then((msg) => console.log(msg+' done!')); // Promiseが終了したら「done!」と表示する

//Promiseとasyncとawaitを使ったサンプルコード1
const example =async function(){
  const ret = await new Promise((resolve, reject) => resolve("Hello 2")); // Promiseを作成し、終了する
  console.log(ret+' done2!'); // 「done!」と表示する
}

example();

//Promiseとthenを使ったサンプルコード2
const promise2 = new Promise((resolve, reject) => {let obj = {message:'hello world!',number:42};resolve(obj)}); // Promiseを作成し、終了する
promise2.then((msg) => console.log(msg.message+', '+msg.number+', '+'done!')); // Promiseが終了したら「done!」と表示する

//Promiseとasyncとawaitを使ったサンプルコード2
const example2 = async function(){
  const ret = await new Promise((resolve, reject) => {let obj = {message:'hello world!2',number:100};resolve(obj)}); // Promiseを作成し、終了する
  console.log(ret.message+', '+ret.number+', '+'done!2')
}

example2();

/*
Hello 1 done!
Hello 2 done2!
hello world!, 42, done!
hello world!2, 100, done!2
*/

const printAsync = function(text, delay) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log(text);
        resolve(text);
    }, delay);
  });
}
const printTexts = function(){
  printAsync('hello', 1000)
    .then((a) => {
      console.log("戻り値(1)  a=" + a);
      a += " world";
      return printAsync(a, 500);
    })
    .then((a) => {
      console.log("戻り値(2)  a=" + a);
      a += " JavaScript";
      return printAsync(a, 2000);
    })
    .then((a) => {
      console.log("戻り値(3)  a=" + a);
      a += " 2023";
      return printAsync(a, 500);
    })
    .then((a) => {
      console.log("戻り値(4) a=" + a);
    })
    .catch((error) => {
      console.error("エラー:", error);
    });
}

printTexts();

const  printTexts2 = async function(){
  let a = await printAsync('hello', 1000);
  console.log("2 戻り値(1)  a="+a);
  a +=" world";
  a=await printAsync(a, 500);

  a +=" JavaScript";
  console.log("2 戻り値(2)  a="+a);
  a=await printAsync(a, 2000);

  a +=" 2023";
  console.log("2 戻り値(3)  a="+a);
  a=await printAsync(a, 500);

  console.log("2 戻り値(4) a="+a);

}

printTexts2();

/*
hello
戻り値(1)  a=hello
hello
2 戻り値(1)  a=hello
hello world
戻り値(2)  a=hello world
hello world
2 戻り値(2)  a=hello world JavaScript
hello world JavaScript
戻り値(3)  a=hello world JavaScript
hello world JavaScript
2 戻り値(3)  a=hello world JavaScript 2023
hello world JavaScript 2023
戻り値(4) a=hello world JavaScript 2023
hello world JavaScript 2023
2 戻り値(4) a=hello world JavaScript 2023

*/

//Promiseとthenを使ったサンプルコード3
const buy = async function(pay) {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
        if (pay >= 100) {
            console.log("100円の商品を購入しました");
            resolve(pay);
        } else {
            reject("お金が足りないよ pay = " + pay);
        }
    }, 500);
});
}

buy(200).then(function(change) {
  console.log(`お釣りは${change}円です`)
}).catch((e) => console.log("e=" + e));

buy(30).then(function(change) {
  console.log(`お釣りは${change}円です`)
}).catch((e) => console.log("e=" + e));

//Promiseとasyncとawaitを使ったサンプルコード3
const purchase = async function (pay) {
  try {
    const change = await buy(pay);
    console.log(`お釣りは${change}円です`);
  } catch (e) {
    console.log("e=" + e);
  }
};

purchase(200);
purchase(30);

const hoge2 = function() {

  const recursiveBuy = function(a) {
    return buy(a).then(function(newA) {
        console.log("whileの中 残金 a=" + newA);
        return recursiveBuy(newA - 100);
    });
  };

  recursiveBuy(1000).catch(function(error) {
    console.error("エラー:", error);
  });

}

hoge2();

const hoge3 = async function() {

  try {

    let a = await buy(1000);
    console.log("2 残金 a=" + a);

    while(1){
      a = a - 100;
      a = await buy(a);
      console.log("2 whileの中 残金 a=" + a);
    }
    
  } catch (error) {
    console.error("2 エラー:", error);
  }

}

hoge3();

/*

100円の商品を購入しました
お釣りは200円です
e=お金が足りないよ pay = 30
100円の商品を購入しました
お釣りは200円です
e=お金が足りないよ pay = 30
100円の商品を購入しました
whileの中 残金 a=1000
100円の商品を購入しました
2 残金 a=1000
100円の商品を購入しました
whileの中 残金 a=900
100円の商品を購入しました
2 whileの中 残金 a=900
100円の商品を購入しました
whileの中 残金 a=800
100円の商品を購入しました
2 whileの中 残金 a=800
100円の商品を購入しました
whileの中 残金 a=700
100円の商品を購入しました
2 whileの中 残金 a=700
100円の商品を購入しました
whileの中 残金 a=600
100円の商品を購入しました
2 whileの中 残金 a=600
100円の商品を購入しました
whileの中 残金 a=500
100円の商品を購入しました
2 whileの中 残金 a=500
100円の商品を購入しました
whileの中 残金 a=400
100円の商品を購入しました
2 whileの中 残金 a=400
100円の商品を購入しました
whileの中 残金 a=300
100円の商品を購入しました
2 whileの中 残金 a=300
100円の商品を購入しました
whileの中 残金 a=200
100円の商品を購入しました
2 whileの中 残金 a=200
100円の商品を購入しました
whileの中 残金 a=100
100円の商品を購入しました
2 whileの中 残金 a=100
エラー: お金が足りないよ pay = 0
2 エラー: お金が足りないよ pay = 0
*/

【JavaScript】Promise で非同期処理を記述する – 株式会社ライトコード (rightcode.co.jp) ExternalLink
【JavaScript】 async/await で非同期処理をわかりやすく記述する – 株式会社ライトコード (rightcode.co.jp) ExternalLink

• 
• Tweet

• JavaScript