- 一般格式
axios.get(url[, config])
axios.delete(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
get和delete的格式类似,post、put、patch格式类似
-
GET:获取数据
后端将参数当做url 参数 接收
this.axios.get('/url/user', {
params: {
"name": "kevin",
"password": "123456"
}
})
.then((response)=> {
console.log(response)
})
.catch((error)=> {
console.log(error);
});
后端用query接收参数,URL格式:"/url/user?name=kevin&password=123456"
-
POST:新增数据
使用post方法时header['content-type']默认为application/json
this.axios.post('/url/add', {
"username": this.userinfo.username,
"password": this.userinfo.password
})
.then((response) => {
console.log(response);
})
.catch((error) => {
console.log(error);
});
后端接收用JSON接收参数,URL不会体现变化
如果修改为application/x-www-form-urlencoded,那么需要引入qs.stringify序列化
this.axios.post('url/add', this.qs.stringify({
"username": this.userinfo.username,
"password": this.userinfo.password
}), {
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
}
})
.then((response) => {
console.log(response);
})
.catch((error) => {
console.log(error);
});
后端使用FORM接收参数
-
PUT:更新数据
PUT和POST类似
this.axios.put('/url/update', {
"userId": this.userinfo.Id,
"userName": this.userinfo.username
})
.then((response)=> {
console.log(response)
})
.catch((error)=> {
console.log(error);
});
后端接收方式也类似
-
DELETE:删除数据
使用delete方法时,由于数据包中没有默认的header['content-type']=application/json,此时数据向后端传输时,需要做一层data封装.
this.axios.delete('/url/delete', {
data: { username : "admin" , password : "123" }
})
.then((response)=> {
console.log(response)
})
.catch((error)=> {
console.log(error);
});
后端接收用JSON接收参数
或者后端将参数当做url 参数 接收
this.axios.delete('/url/delete', {
params: { username : "admin" , password : "123" }
})
.then((response)=> {
console.log(response)
})
.catch((error)=> {
console.log(error);
});
后端用query接收参数, URL格式:"/url/delete?name=admin&password=123"
或者后端将参数当做url 参数 接收
this.axios.delete('/url/delete/' + id)
.then((response)=> {
console.log(response)
})
.catch((error)=> {
console.log(error);
});
后端用param接收参数, URL格式:"/url/delete/id"