Vue.jsにおける非同期リクエストの連鎖とMyBatisでのパラメータマッピングエラーの解決方法

1. 非同期通信におけるパラメータ取得とリクエストの実行順序

フロントエンドの開発において、あるAPIから取得した値を別のリクエストのパスパラメータとして使用する場合、データの同期制御が不十分だと「パラメータが空」の状態でリクエストが送信されることがあります。

問題の状況

特定のユーザー情報を取得した後に、その情報を元に統計データを取得する処理において、初期値が空の状態でGETリクエストが走ってしまう、あるいは条件分岐後のデータ処理が重複してコードの可読性が低下している状態。

改善されたコードの実装例

以下の例では、必要なパラメータ(担当者名)が存在しない場合に、先にプロファイル情報を取得してからメインのデータ処理を行うようにリファクタリングしています。データの変換処理を共通化し、メンテナンス性を向上させています。


async fetchMemberStats() {
  try {
    let targetName = this.currentStaffName;

    // パラメータが不在の場合、先に情報を取得する
    if (!targetName) {
      const authInfo = this.$storage.get('auth_user');
      const userResponse = await this.$http.get(`api/staff/profile/${authInfo}`);
      targetName = userResponse.data.name;
      this.currentStaffName = targetName;
    }

    // 取得したパラメータを用いて統計データをリクエスト
    const response = await this.$http.get(`api/analysis/consumption/${targetName}`);
    const rawData = response.data.records || [];

    // ECharts等のライブラリ向けにデータを整形
    this.chartDisplayData = rawData.map(item => ({
      name: item.categoryName,
      value: item.totalAmount
    })).sort((a, b) => b.value - a.value); // 降順ソート

    // 描画メソッドの呼び出し
    this.updateChart();

  } catch (error) {
    console.error("データ取得フェーズでエラーが発生しました:", error);
  }
}

ポイント: async/await を利用することで、非同期処理の順序を直感的に記述し、コールバック地獄を回避しています。また、map 関数を利用することで、ループ処理とオブジェクトの再構築を簡潔に行っています。

2. MyBatisにおける「Parameter not found」エラーの修正

MyBatisを使用してJavaのList型などのコレクションを引数に渡す際、DAO(Mapper)インターフェースで適切なアノテーションが付与されていないと、パラメータのバインドに失敗することがあります。

エラー内容

Parameter 'targetList' not found. Available parameters are [collection, list]

このエラーは、MyBatisがXMLマッパーに渡されたリストをどの名前で参照すればよいか判断できず、デフォルトの list という名称のみを期待している場合に発生します。

解決策

Mapperインターフェースの引数に対して @Param アノテーションを明示的に付与します。これにより、XML内の #{...}<foreach> タグで指定した名称と一致させることができます。


/**
 * 複数名の担当者に基づいて年間実績データを取得する
 */
List<AnnualPerformanceVO> findPerformanceByStaffNames(@Param("staffNames") List<String> staffNames);

XML側での記述例:


<select id="findPerformanceByStaffNames" resultType="AnnualPerformanceVO">
    SELECT * FROM performance_stats
    WHERE staff_name IN
    <foreach item="name" collection="staffNames" open="(" separator="," close=")">
        #{name}
    </foreach>
</select>

解説: @Param("staffNames") を追加することで、MyBatis内部のコンテキストに staffNames というキーでリストが登録され、SQL構築時に正しく参照可能になります。

タグ: vue.js Axios MyBatis Java Spring Boot

7月17日 02:03 投稿