浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【axios】レスポンス取得時の判定を正しく取得する

axiosで重いデータをリクエストとして投げる・またはレスポンスの取得に時間がかかるような

apiで以下の処理を行うと、レスポンスは帰ってきているのにresult.sucessはfalseとして

返ってくるという不思議な現象が起きる。

const result = await sampleService.regist(nameToken, homeToken);

if(result.success){
  console.log(データが返ってくる場合)
} else {
  console.log(データが返ってくこない場合)
}

return await new SampleApi(apiTokenService, authenticationService).check(nameToken, homeToken);

async regist(nameToken, homeToken) {
  const axios = this.createRequest({
    //ヘッダーにコンストラクタとして設定したクラスを追加
    headers: {
      'x-api-token':  { toString: () => this.apiTokenService.apiToken } ,
      'authorization': `Bearer ${this.authenticationService.authToken}`,
    },
  });

  return new ApiHelper(this).requestWithApiTokenAutoRefreshMechanism(
    async () => axios.post('/sampleget',
      {
        "baseToken": nameToken,
        "baggageToken": homeToken
      }
    )
  );
}

これは、axiosが非同期で実行していて、返ってくるデータが重いデータであろうが待つ

必要がない処理として動いているので、時間差でifの作業が先行して

処理を進めてしまっているため起きています。

これを防ぐには、awaitをカッコで囲み最後にカッコに外に.dataを追加します。

const result = (await middleBaseService.regist(nameToken, homeToken)).data;
  • この記事いいね! (1)