【JavaScript】axios@0.19.0で共通のクエリパラメータが正常にセットできない問題と対応方法 #JavaScript

結論

v0.19.0限定のバグのようです。
axiosのGithub上のissueで既に議題になっています。

暫定対応になりますが、v0.18.0にダウングレードして利用することで回避できます。

問題のコード

以下のようなコードを書いた時に発生します。

axios.create({
  params: {
    apiKey: "abcdefghijklmnopqls"
  }
});

axios.get("https://xxx.com/api/posts");

// 期待される実行結果 
//   https://xxx.com/api/posts?apiKey=abcdefghijklmnopqlsへのアクセス
// 実際の実行結果
//   https://xxx.com/api/postsへのアクセス

APIにアクセスする際に、常にクエリパラメータにAPIキーの指定が必要なシステムがあり、毎度get関数を呼び出す際にapiKeyを指定したくない。

といった場合に、create関数で共通する情報を予め設定できます。
...が、axios@0.19.0のバグでうまく付与されないようです。

暫定対応

issueを見ると、修正のPRが取り込まれたバージョンがぼちぼちリリースされる雰囲気ですが、一応それまでの暫定対応を書いておきます。

get関数にベタ書き

axios.get("https://xxx.com/api/posts?apiKey=abcdefghijklmnopqls");

※ メンテナンス性最悪なので非推奨。

axios@0.18.0にダウングレード

CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
↓
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>

npm

# 今のaxiosのアンインストール(自身の環境に合わせて--saveオプション、--save-devオプションを付与して下さい)
npm uninstall axios

# 0.18.0版のインストール
npm install axios@0.18.0

v0.19.0じゃなければいけない理由がなければこちらを推奨

一応issueをウォッチして、修正版がでたら追記します。