index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8" />
<script src="https://unpkg.com/vue@2.6.14"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<title>HTTP Post</title>
</head>
<body>
<div id="app">
<table>
<tr><th>args</th>
<td> {{data_aa.args}} </td></tr>
<tr><th>headers</th>
<td> {{data_aa.headers}} </td></tr>
<tr><th>origin</th>
<td> {{data_aa.origin}} </td></tr>
<tr><th>url</th>
<td> {{data_aa.url}} </td></tr>
<tr><th>headers</th>
<td> {{data_aa.headers}} </td></tr>
<tr><th>json</th>
<td> {{data_aa.json}} </td></tr>
</table>
</div>
<script src="http_post.js"></script>
<p />
Apr/27/2019<p />
</body>
</html>
http_post.js
// ---------------------------------------------------------------
// http_post.js
//
// Apr/27/2019
//
// ---------------------------------------------------------------
var app = new Vue({
el: '#app',
data: {
data_aa: []
},
methods: {
async getData() {
const url = 'https://httpbin.org/post'
const args = {
data: { user: "jiro", password: "123456" },
headers: { "Content-Type": "application/json" }
}
await axios.post(url,args).then(x => { this.data_aa = x.data })
}
},
mounted() {
this.getData()
}
})
// ---------------------------------------------------------------
実行結果
