【Promise】２つのプロミスを連続して使用する場合

Question

前提・実現したいこと

Promise処理で設定１、設定２のコードを連続で使用したい場合、
使用１に書いてみたのですが、こちらの記載で問題ないでしょうか。
もう少し簡潔にできる、何かが抜けている等がありましたら、教えて頂ければ幸いです。

該当のソースコード

// 設定１
const readScript = () => {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.setAttribute('src', 'test.js');
    script.setAttribute('charset', 'utf-8');
    document.getElementsByTagName('body')[0].appendChild(script);
    script.onload = script.onreadystatechange = () => {
      if (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') {
        resolve('成功１');
      }
    };
  });
};

// 設定２
const ChangePermission = () => {
  return new Promise((resolve, reject) => {
    if ('permissions' in navigator) {
      navigator.permissions.query({ name: 'notifications' }).then((notificationPerm) => {
        notificationPerm.onchange = () => {
          if (notificationPerm.state === "granted") {
            console.debug('通知が許可に変更');
            resolve('成功２');
          }
        };
      });
    }
  });
};

// 使用１ 連続で使用してみた場合
readScript()
  .then((value) => { //スクリプト読み込み後
    console.debug(value);
    ChangePermission()
      .then((value) => { //通知許可時
        console.debug(value);
        //行いたい処理
      }).catch((error) => {
        console.debug(`ChangePermission ${error}.`);
      });
  }).catch((error) => {
      console.debug(`readScript ${error}.`);
  });

Answer 1

？？「プロデューサさんはpromise.thenの使い方がまだまだなってないですね！
……しょうがありません。このカワイイぼくが教えて差し上げましょう！

というわけで、promise.thenの解説です。
promise.thenはちょっと特殊な挙動をする事になります。

• 普通に値を返す: resolve(return-value)として処理
• 例外を返す: reject(throw-error)として処理
• Promiseを返す: promiseの処理を継続させ、結果(resolve, reject)により分岐

従って、最初のthenはすぐにthenで返した方が綺麗なコードになります。

// 使用１ 連続で使用してみた場合
readScript()
  .then(value => { //スクリプト読み込み後
    console.log("ReadScript successful");
    console.debug(value);
    return ChangePermission();
  })
  .then(value => {
    console.log("ChangePermission successful");
    console.debug(value);
  })
  .catch(error => {
    console.debug(error);
  });

こっちのほうが上から流れるような処理順番を綺麗に表現できてると思います。

質問文の使用例1はどの失敗がどのcatchで補足出来るかを細かく指示できますが、
処理が増えるとネストしまくりでpromiseのメリットが殆ど残ってないように思えますからね。

---

おまけ
既存のコードをざっとレビューしてみました。

• 1行目が即リターンなアロー関数は{}を抜いた方が簡素になる
• if文は長いコードを包まずに１〜2行の動作に徹した方が良い、主な用途はガード節
• readScriptがtest.jsを決め打ちで読み込み始めるのはどうよ？引数で受け取るようにしてみたらどう？
• navigatorがpermissionsプロパティを持ってない時のハンドリングが未修正

Comments

[OOO_777]

ご回答ありがとうございます。
Promise.thenのご説明、コードレビューありがとうございます。
コードレビューに記載してあるもの全てを取り入れたいと思います。

２点質問をさせて頂きたいのですが、
１：return ChangePermission(); ←この処理が終了した際に動作させたい処理を記述する場合は、二番目のthenの中に記述をすればいい、という認識で問題ないでしょうか。

２：catchは最初にエラーになった方の値を返す、という認識で問題ないでしょうか。

[miyabi-sun]

1. そのとおり
Promiseというのは「実行中だよ」というステートをまるっと含んだインスタンスと理解してください。
`.then`で繋ぐと、「既に完了済み」もしくは「実行中→完了済み」になったら実行してねという風に
子供のお使いの内容を予め紙に書いて渡すような宣言の仕方になります。

使用例1はpromiseをreturnしていないので、これ以上thenで繋ぐ事は出来ません。

2. そうです。
try〜catch構文と同じようなものですね。
Promise内で動作中の関数がrejectを返した場合、内部パラメータは「実行失敗」になります。
実行失敗になると、以降つないでいる全ての`.then`は実行されず、一度だけ`.catch`を実行して完了します。

[OOO_777]

前回の質問に続きご回答頂きありがとうございます。
とても勉強になりました！

Answer 2

const readScript=()=>{
  return new Promise((resolve)=>{
    setTimeout(() =>{console.log(1);resolve('hoge');}, 200)
    });
};
const ChangePermission=()=>{
  return new Promise((resolve)=>{
    setTimeout(() =>{console.log(2);resolve('fuga');}, 100)
    });
};

• thenで処理

readScript().then(result=>{
  ChangePermission().then(result=>{
  console.log(result);
  });
  console.log(result);
});

• async,awaitで処理

(async ()=>{
  console.log(await readScript());
  console.log(await ChangePermission());
})();

Comments

[OOO_777]

ご回答ありがとうございます。
他の書きかたも記載して頂きありがとうございます。
参考にさせて頂ければと思います。