axios JavaScript

Ajaxでやってた処理をaxiosでやるとパラメータが渡らない問題

jQuery + Ajaxでやってた非同期処理をVue.js + axiosに書き換えたら、同じ処理してるはずなのにサーバ側にrequestデータが渡らなくなってしまって困った。ちなサーバ側の言語はPHP。結論から言うとaxiosはパラメータの記述方法によって送られるデータの形式が変わるみたい。

どんな風に送ってるか確認する方法

大正義Chromeデベロッパーツールさんにおまかせ。「F12」 → 「Network」 → 「Name」 → Headers内の一番下にPOST時に送られるデータが出てるはず。

例えばAmazonでほしいものリスト登録する時の非同期処理だとこんな感じ。Form Dataの中身が送ってるrequestデータ。

記述方法３パターン

多分これ以外にもありそうだけど今回踏んだ3つを書いとく

1.JSON.stringify() requestデータの形式：

▼Form Data
{id: 1, type: update}

2.そのままobject

requestデータの形式：

▼request payload
{id: 1, type: update}

3.new FormData() requestデータの形式：

▼Form Data
id: 1
type: update