axios设置请求体

方式一：json请求

方式二：form表单

 

<template>
<div>{{ msg }}</div>
</template>
<script>
export default {
data:() =>({
msg:'',
}),
created () {
const axios = require('axios');

// axios.get 发出get请求
// 请求参数拼接在 url当中
// .then接收响应【快捷键：thenc】
axios.get(
'https://httpbin.ceshiren.com/get?id=123'
).then((result) => {
console.log('get请求，通过拼接url的形式传递参数')
console.log(result)
//赋值msg
this.msg = result.data

}).catch((err) => {
console.log(err)
});
// 通过params 形式传递参数的 get请求
axios.get(
'https://httpbin.ceshiren.com/get?id=123',
{
params:{id:123}
}
).then((result) => {
console.log('通过params 形式传递参数的 get请求')
console.log(result)
}).catch((err) => {
console.log(err)
});

//post 请求
axios.post(
'https://httpbin.ceshiren.com/get?id=123'
).then((result) => {
console.log('post请求')
console.log(result)
}).catch((err) => {
console.log(err)
});

//post 请求，json格式的请求体
axios.post(
'https://httpbin.ceshiren.com/post',
{name:'lily'}
).then((result) => {
console.log('post 请求,json格式请求体')
console.log(result)
}).catch((err) => {
console.log(err)
});

//post 请求，传递form表单格式的请求体
//先下载 form-data,安装命令：npm install form-data --save
const FormData = require('form-data');
const form = new FormData();
form.append('name','lily');

axios.post(
'https://httpbin.ceshiren.com/post',
form,
{'content-type':'application/x-www-form-urlencoded'}
).then((result) => {
console.log('post 请求，传递表单格式的请求体')
console.log(result)
}).catch((err) => {
console.log(err)
});

 

}
}
</script>