株式会社テイク-ワンのY.Nです。

Node.jsなどで使用しているaxiosを現代のブラウザに標準で組み込まれているfetchへ置き換えた時に、想定してなかった動作が発生したので紹介します。

axiosとfetchとは？

どちらもHTTPリクエストを行うための機能となります。
ただ、それぞれの特徴や使い勝手が異なります。
※今回は、特徴や使い勝手の説明は省略します。

想定してなかった動作とは何が起きたのか

結論から話すと、axiosからfetchに置き換えたことにより、配列を渡しているのに単体パラメータが来たと判定されていました。

A = [1, 2]
B = [1]

例えば、各通信ライブラリに上記のようなAのデータを渡した場合に、GETリクエストのqueryパラメータを確認します。

■axios

?A[]=1&A[]=2

■fetch

?A=1&A=2

となり、正しく配列でデータが渡っています。

ただし、Bのデータを各通信ライブラリに上記のようなパラメータを渡し確認すると

■axios

?B[]=1

■fetch

?B=1

となります。

axiosは、配列でデータが渡りますが、fetchは受け取り側で単体パラメータが来たと判定され配列では無くなります。

どのように対策したのか

対策の種類は、いくつかあると思いますが以下のパターンで対策しました。

• 受け取り側で、文字列の配列のみを許容していたので、文字列の配列と文字列の両方のパターンを許容する
• 文字列の配列のみを許容しているため、単一の文字列が渡された場合はエラーにする（バリデーションで弾く）

おわりに

axiosからfetchへ置き換えた時に、発生した事象を紹介しました。
今回紹介した事象以外にもaxiosからfetchへ置き換え時の注意点はありますので、置き換える際はご注意ください。