axiosライブラリの設定プロパティについて

前提

axiosの基本的な利用方法は公式ドキュメントとnpmのreadmeをみるのが一番である。

APIドキュメント
https://axios-http.com/ja/docs/intro
readme
https://www.npmjs.com/package/axios

そのうえで困ったことをここで紹介。

POSTリクエスト時にURLにクエリを追加

paramsプロパティにkey-valueを追加することでPOSTリクエスト時でもURLにクエリを追加することができる。

axios.post(url, data //bodyに設定するデータ, {
    params: {
        p1:"123",
    } //URLに追加されるクエリ
})

リクエストしたURLの確認方法

GETリクエストやPOSTリクエストをしたときにparamsプロパティを使用してリクエストした場合のURLを知りたい場面があったのだが、axiosにはおそらくparamsプロパティまで考慮した最終的なリクエストURLを取得する手段がない。このため、axiosが提供するgetUriメソッドを使用してparamsプロパティを使用したときにどんなURLが生成されるのかを確認した。

const url = axios.getUri({
    url: 'https://example.com',
    params: {
        p1:"123",
        p2:"xyz",
    }
});
console.log(url);

paramsプロパティに配列データを指定する場合のシリアライズパターンの指定

paramsプロパティに配列データを指定するとデフォルトでは空のブラケットに値を設定する形でクエリが生成される。

const url = axios.getUri({
    url: 'https://example.com',
    params: {
        p1:['t1'],
    }
});

//urlはhttps://example.com&p1[]=t1になる

この挙動を変更するためにはparamsSerializerプロパティのindexesプロパティを変更すればよい。

• indexexがnullの場合はブラケットなしで値が展開される。
• indexesがfalseの場合は空のブラケット付きで値が展開される。（デフォルト）
• indexesがtrueの場合はインデックスがあるブラケット付きで値が展開される

const url = axios.getUri({
    url: 'https://example.com',
    params: {
        p1:['t1'],
    },
    paramsSerializer: {
      indexes: null //null or false or trueのいずれかが選択可能
    }
});

//urlはhttps://example.com&p1=t1になる

参考URL

https://github.com/axios/axios/issues/5058