方法1：.thenで処理を実行

この方法はAPI呼び出し後に固定された処理を実行する際に適しています。

getList() {
  this.$http({
    method: 'get',
    url: 'http://127.0.0.1:4523/mock/430173/user/list',
    params: params
  }).then((response) => {
    this.dataList = response.data.list;
    console.log('データ検索成功！');
  });
}

デメリット

• 処理がネスト状になりやすい
• API呼び出し部分の再利用がしにくい

方法2：コールバック関数を利用して処理を実行

異なる条件で異なる処理を実行したい場合に適しています。API呼び出し部分を再利用しやすくなります。

// 初期化処理
initialize() {
  const initSuccess = () => {
    console.log('初期化処理完了');
  };
  this.fetchList({}, initSuccess);
},

// 検索処理
searchData() {
  const params = {
    name: 'Hiroshi'
  };

  const searchSuccess = () => {
    console.log('検索処理完了');
  };
  this.fetchList(params, searchSuccess);
},

// リスト取得関数
fetchList(params = {}, callback) {
  this.$http({
    method: 'get',
    url: 'http://127.0.0.1:4523/mock/430173/user/list',
    params: params
  }).then((response) => {
    this.dataList = response.data.list;
    if (callback) {
      callback();
    }
  });
}

方法3：async awaitとPromiseを使用

非同期処理が同期的に記述でき、可読性が向上します。また、関数の再利用も容易になります。

基本の使い方

// 検索処理
async searchData() {
  const params = {
    name: 'Hiroshi'
  };

  await this.fetchList(params);
  console.log('データ取得完了');
},

// リスト取得処理
fetchList(params = {}) {
  return this.$http({
    method: 'get',
    url: 'http://127.0.0.1:4523/mock/430173/user/list',
    params: params
  }).then((response) => {
    this.dataList = response.data.list;
    console.log('API呼び出し成功');
  });
}

返却値を利用する場合

// 検索処理（返却値を使用）
async searchData() {
  const params = {
    name: 'Hiroshi'
  };

  const result = await this.fetchList(params);
  console.log('API応答データ:', result);
},

// リスト取得処理（Promise.resolveで返却値を渡す）
fetchList(params = {}) {
  return this.$http({
    method: 'get',
    url: 'http://127.0.0.1:4523/mock/430173/user/list',
    params: params
  }).then((response) => {
    this.dataList = response.data.list;
    console.log('API呼び出し成功');
    return Promise.resolve(response);
  });
}