헤더설정 후 각 method에 맞게 전송.
POST 전송을 찾아서 작성.
https://blog.logrocket.com/how-to-make-http-requests-like-a-pro-with-axios/#axiospost
How to make HTTP requests with Axios - LogRocket Blog
Axios has become undeniably popular among frontend developers. We'll examine the key reasons that have contributed to its rapid rise.
blog.logrocket.com
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<div id="app">
<button v-on:click="post">get data</button>
</div>
<div id="app3">
<button v-on:click="get">get data</button>
</div>
<script>
const options = {
headers: {
'content-type' : 'application/json',
'x-api-key' : ''
}
}
new Vue({
el: '#app',
methods: {
post: function() {
axios.post('{api endpoint 주소}',
{
"service_name": "Epikar",
"key_type": "int4",
"msg": "",
"target_no":[""]
}, options
)
.then(function(response) {
console.log(response);
})
.catch(function(error) {
console.log(error);
});
}
}
})
</script>
<script>
new Vue({
el: '#app3',
methods: {
get: function() {
axios.post('{api endpoint 주소}',
{},options)
.then(function(response) {
console.log(response);
})
.catch(function(error) {
console.log(error);
});
}
}
})
</script>
</html>option 설정 후 각 메소드마다, 주소,{data}, option 순으로 입력후 전송, data는 body로 전송.
'Front > Vue.js' 카테고리의 다른 글
| [Error][Vue] Optional Chaning Error, 물음표 에러 (0) | 2022.11.28 |
|---|---|
| [JS][Vue] ml5.js 를 이용한 MobileNet serving (0) | 2021.07.05 |
