文章目录
欢迎访问笔者个人技术博客:
http://rukihuang.xyz/
axios请求发送
0 抽取baseURL
-
Vue项目可在项目根目录的
main.js
文件中抽取
baseURL
axios.defaults.baseURL = 'http://localhost:8080/eduonline'
1 get请求
-
多个参数传递,一定是
params
表示
1.1 代码示例1
axios({
method: 'get',
url: 'page/getPageInfo',
headers: {
'content-type': 'application/json',
},
params: {
pos: this.position,
},
}).then(res => {
console.log('成功了')
console.log(res)
)
}, err => {
console.log('错误了')
console.log(err)
})
1.2 代码示例2
//可配置参数的方式
axios.get('/user',{
params:{
ID:12345
}
}).then(res => {
console.log('成功了')
console.log(res)
)
}, err => {
console.log('错误了')
console.log(err)
})
//或者直接在url后拼接参数
axios.get('/user?id=123')
.then(res => {
console.log('成功了')
console.log(res)
)
}, err => {
console.log('错误了')
console.log(err)
})
2 post请求
-
post
传递参数,必须用
data
2.1 代码示例
//以json格式传入参数
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(res => {
console.log('成功了')
console.log(res)
)
}, err => {
console.log('错误了')
console.log(err)
})
//发送post请求
axios({
method: 'post', //请求方式,默认是get请求
url:'/user/12345', //地址
data:{ //参数
firstName: 'simon',
lastName: 'li'
}
});
2.1 后端接收参数为null,可以用FormData传递
-
项目中发现前端
post
请求传参,后端接收不到,均为
null
值,此时可以通过
FormData
进行传参
let formData = new FormData()
formData.append('position', this.position)
formData.append('docServerFileName', this.docServerFileName)
formData.append('socServerFileName', this.socServerFileName)
formData.append('vidServerFileName', this.vidServerFileName)
formData.append('posResponsibility', this.posResponsibility)
axios({
method: 'post',
url: 'page/submitPageInfo',
headers: {
'content-type': 'application/json',
},
data: formData,
}).then(res => {
console.log('成功了')
this.$Message.success('提交成功')
}, err => {
console.log('错误了')
console.log(err)
this.$Message.error('提交失败,请联系技术人员')
})
2.3 上传文件需修改content-type
-
上传文件,
headers
里的
content-type
需改为
multipart/form-data
let formData = new FormData()
formData.append('file', this.file)
axios({
method: 'post',
url: 'positionLearning/videoUpload/uploadVideo',
headers: {
'content-type': 'multipart/form-data',
},
data: formData,
}).then(res => {
console.log('成功了')
console.log(res)
}, err => {
console.log('错误了')
console.log(err)
this.$Message.error('后台服务出问题,请联系技术人员')
})
版权声明:本文为weixin_43508544原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。