【JavaScript】fetch then の綺麗な書き方

Question

質問

jsで複数の関数でfetchを使い、getやpostをしています。

サンプルコードでは、getの関数getAllId()、putの関数execution()、それらの関数を実行している関数init()に分けています。

今の書き方だと、init() の中のthen()などが入れ子になりすぎて可読性に欠けると思っています。

このようなことをしたい場合、どのように書くべきなのか教えて頂きたいです。

js

class Api {
  constructor(_parm) {
    // APIトークン（仮。実際はenvなどに記載する想定です）
    this.apiToken = 'xxxxxxxxxxxxxxxx';
  }

  /**
   * 全てのIDを取得（GETメソッド）
   * {[id: 1, hoge: xxx], [id: 2, hoge: yyy]}のようなデータが返ってくる想定
   * @returns Array 全てのID
   */
  async getAllId() {
    const url = 'https://xxxxxxxxxxxxx';
    const options = {
      method: 'GET',
      headers: {
        Accept: 'application/json',
        'x-chatworktoken': this.apiToken
      }
    };
    const response = await fetch(url, options);
    return response.json();
  }

  /**
   * IDを元に何かを実行（PUTメソッド）
   */
  async execution(_id) {
    const url = `https://xxxxxxxxxxxxx/${_id}`;
    const options = {
      method: 'PUT',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/x-www-form-urlencoded',
        'x-chatworktoken': this.apiToken
      }
    };
    const response = await fetch(url, options);
    return response.json();
  }

  init() {
    this.getAllId()
      .then(_datas => {
        const arrayIds = _datas.map(_data => _data.id);
        arrayIds.forEach(_id => {
          this.execution(_id)
            .then(_res => {
              console.log(_res);
            })
            .catch((error) => {
              console.error('Error:', error);
            });
          ;
        });
      })
      .catch((error) => {
        console.error('Error:', error);
      });
  }
}

const api = new Api();
api.init();

Comments

[int32_t]

init() で async/await を使わないのは何か理由があるのでしょうか。

Answer 1

与件として

• init() の中で行っている処理の then の入れ子を減らしたい、または無くしたい。
• けれどもinit()をasyncなメソッドにしたくない。（または、しなくてもよい）

というお題で考えてみました。以下はどうでしょう？

  init() {
    (async (api) => {
      try {
        const arrayIds = await api.getAllId();
        const executors = arrayIds.map(id => api.execution(id));
        const responses = await Promise.all(executors);
        console.log(responses);
      } catch (error) {
        console.error('Error:', error);
      }
    })(this);
  }

Comments

[true_colors_20]

ありがとうございます。具体的な書き方とても参考になりました。

Answer 2

どこが気になるのかよくわかりませんが、thenをなるべく排除したいなら
コールバックをasyncにしてfetch処理をawaitで回して戻り値(json?)を一旦変数に受けて
処理すればスッキリするかもしれません。
ただfetch自体のネットワークエラーなどをcatchしたいならやはりthen/catchで
切り分けが必要になるのでご提示のようなソースの流れになるのはしかたないかも

あとは、API側がIDを一度に１つずつしか受け取れないという仕組みがそもそもの
課題のような気がします。複数のIDをもらって全データをjsonで返せるなら
もっとらくな処理になりそうな予感はします