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()
?
1
2
3
4
5
6
7
const params = {'id': 1, 'type': 'update'};
 
await axios({
method: 'POST',
url: '【requestUrl】',
data: JSON.stringify(params)
})
requestデータの形式：
▼Form Data
{id: 1, type: update}

2.そのままobject
?
1
2
3
4
5
6
7
const params = {'id': 1, 'type': 'update'};
 
await axios({
method: 'POST',
url: '【requestUrl】',
data: params
})
requestデータの形式：
▼request payload
{id: 1, type: update}

3.new FormData()
?
1
2
3
4
5
6
7
8
9
const params = new FormData();
params.append('id', 1);
params.append('type', 'update');
 
await axios({
method: 'POST',
url: '【requestUrl】',
data: params
})
requestデータの形式：
▼Form Data
id: 1
type: update