文档：GitHub - axios/axios: Promise based HTTP client for the browser and node.js
目录
一、axios发送get请求
简写版get请求
完整版get请求
get请求怎么在路径上携带参数
二、axios发送post请求
简写版post请求
完整版post请求
其他方式发送post请求
三、axios发送put请求
简写版 put请求
完整版put请求
四、axios发送delete请求删除操作
简写版delete请求
完整版delete请求
其他delete请求的方式：
一、axios发送get请求
我们使用get请求可以得到我们想要的具体的数据
then方法指定成功时候的回调
<button onclick="testGet()">Get请求</button>简写版get请求
// 发送get请求
function testGet(){
// 这个参数是添加请求地址
axios.get('http://localhost:3000/posts')
// 使用.then获取数据
.then(response=>{
console.log('/posts get请求',response.data)
})
}
完整版get请求
// 指定默认配置
axios.defaults.baseURL='http://localhost:3000'
// axios.get('http://localhost:3000/posts？id=1') 之前的写法
// 传入配置对象的方式
axios({
// url:'http://localhost:3000/posts',
// 因为我们配置了 axios.defaults.baseURL='http://localhost:3000' 这里可以用简写方式
url:'/posts',
// 请求参数
params:{
id:1
}
}) .then(response=>{
console.log('/posts get请求',response.data)
})get请求怎么在路径上携带参数
直接拼接到url上面就可以了
@GetMapping("/getQueryPage/{currentPage}/{pageSize}")
public ResultObject getQueryPage(@PathVariable("currentPage") int currentPage,
@PathVariable("pageSize") int pageSize, Book book){
IPage<Book> ipage= bookService.getQueryPage(currentPage,pageSize,book);
// ResultObject r = new ResultObject(true,ipage);
return new ResultObject(true,ipage);
} // 请求服务器获取所有书籍信息
getAllBooks(){
// 第一个books是代理服务器中我们配置的
this.$http.get('/books/books/getQueryPage/'+this.pageNum+'/'+this.pageSize,this.queryBooks)
.then(
response=>{
// console.log("get books",response.data.data)
// this.booksList=response.data.data
// console.log(this.booksList)
console.log("get books",response.data.data)
},
error=>{
this.$message.error('服务器错误,获取书籍列表失败')
}
)
},
其他方式发送get请求
data(){
return{
// 查询条件
queryInfo:{
type:3,
pagenum:1,
pagesize:5
},
// 商品分类的数据列表，默认为空
catelist:[]
}
},
created(){
this.getCateList()
},
methods:{
// 获取商品分类数据
getCateList(){
this.$http.get('categories',{params:this.queryInfo})
}
}二、axios发送post请求
我们可以操作post请求增加一条或者多条数据，可以采用JSON的形式传输数据
<button onclick="testPost()">Post请求</button>简写版post请求
// 发送post请求
function testPost(){
// post请求的数据以对象的形式传输
axios.post('http://localhost:3000/posts', { "title": "json-server3", "author": "typicode3" })
.then(response=>{
console.log('/posts post请求',response.data)
})
}
完整版post请求
// 指定默认配置
axios.defaults.baseURL='http://localhost:3000'
axios({
url:'/posts',
method:'post',
// json字符串的格式
data:{
"title": "json-server3",
"author": "typicode3"
}
}) .then(response=>{
console.log('/posts post请求',response.data)
})其他方式发送post请求
// {rids:idStr} 服务器需要传输一个rids的请求体
this.$http.post(`roles/${this.roleId}/rigths`,{rids:idStr})
// 真正的还书方法
returnBook(){
// 表单先预验证一下
this.$refs.returnBooksRef.validate(valid=>{
if(!valid){
return this.$message.error("密码不可为空，无法还书！")
}
// 验证密码
if( !(this.userPassword===this.returnBooksList.password)){
return this.$message.error("密码错误，无法还书！")
}
// console.log("returnBooksList 发送请求前",this.returnBooksList) 没问题
// 运行到这个地方说明密码正确
//最重要的一步：发请求还书
this.$http.post("/borrowBookProxy/borrowBooks/returnBooks",this.returnBooksList)
.then(
response=>{
// console.log("returnBooksList",this.returnBooksList) 没问题
console.log("return return",response.data)
if(!response.data.data){
return this.$message.error("还书失败！请您刷新列表检查是否需要归还此书！")
}
this.$message.success("归还书籍成功！")
this.returnBooksList.password=''
this.getUser()
this.returnBookDialogVisible=false
},
error=>{
this.$message.error("服务器出现错误，稍后重试")
}
)
})
},三、axios发送put请求
我们采put请求修改数据，可以具体修改某一条数据
<button onclick="testPut()">PUT请求</button> 简写版 put请求
// 发送put请求修改
function testPut(){
// 修改id=3的内容，修改为后面的参数
axios.put('http://localhost:3000/posts/3', { "title": "json-server....", "author": "typicode3..." })
.then(response=>{
console.log('/posts put请求',response.data)
})
}
完整版put请求
axios({
// url:'/posts',
// params:{
// id:1
// },
url:'/posts/1', //这个是上面的简写形式
method:'put',
data: {
"title": "json-server....",
"author": "typicode3..."
}
}).then(response=>{
console.log('/posts put请求',response.data)
})四、axios发送delete请求删除操作
<button onclick="testDelete()">DELETE请求</button>简写版delete请求
// 发送delete请求修改
function testDelete(){
// 删除id=3的数据
axios.delete('http://localhost:3000/posts/3')
.then(response=>{
console.log('/posts delete请求',response.data)
})
}
完整版delete请求
axios({
url:'/posts/3',
method:'delete'
}).then(response=>{
console.log('/posts delete请求',response.data)
})
其他delete请求的方式：
removeRightById(role,rightId){
this.$http.delete(`roles/${role.id}/rights/${rightId}`)
}