JavaScriptでaxiosでpostメソッドを利用して、jsonデータの送信・受信する方法の紹介ページ。
目次
axionの基本的な使い方
基本的な使い方は公式ページに書かれているので、そちらを参照。
あわせて読みたい
postメソッド利用時のヘッダー情報の書き方が書かれていなかったので、下記でヘッダー情報の書き方及び、async-awaitを利用した書き方のサンプルを記載します。
axios post時の記載方法(アロー関数使用)
以下のようにaxios.postを記載したらヘッダー情報を追加することができます。
import axios from 'axios'
// postメソッドで通信するためのasync関数
const testPostMethod = async () => {
// post するパラメータ
const param = JSON.stringify({
name: 'John Doe',
age: 30,
email: 'johndoe@example.com'
})
// post時の header を編集
const customConfig = {
headers: {
'Content-Type': 'application/json'
}
}
const sampleurl = 'http://example.com'
const res = await axios.post(sampleurl, postparams, customConfig)
return res
}
// 上記、async関数を呼び出す
const res = testPostMethod()
if(res.status == 200){
console.log(res.data) // jsonデータが取得できていることを確認
}