axios—使用axios请求REST接口—发送get、post、put、delete请求

柔光的暖阳◎ 2024-04-06 13:20 73阅读 0赞

文档：[GitHub - axios/axios: Promise based HTTP client for the browser and node.js][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)
                 })
            
        }

![4b0b9f56563343499dcfa72b472d3ac1.png][]

### **完整版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('服务器错误,获取书籍列表失败')
                }
              )
           },

![371d27089d374c0caa9a8f3564e8c97b.png][]

![9d2b2e9875ab46b5a1194877abb579fd.png][]

### 其他方式发送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)
            })
        }

![727ce53c48834304889b8adc06ec7143.png][]

### 完整版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)
        })
        }

![2cdbdd838fb741d5b896ff78120d45cd.png][]

### 完整版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)
        })
        }

![6ad5fc0860d34d369db10652d998268a.png][]

### 完整版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}`)
    }

[GitHub - axios_axios_ Promise based HTTP client for the browser and node.js]: https://github.com/axios/axios
[4b0b9f56563343499dcfa72b472d3ac1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/d21feae544d649d39bf5164d38e6a629.png
[371d27089d374c0caa9a8f3564e8c97b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/8f576579c9f74aa38403a5541ee47ce7.png
[9d2b2e9875ab46b5a1194877abb579fd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/8025ca8ddc6b48c4a04077ee18c6c1c4.png
[727ce53c48834304889b8adc06ec7143.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/a2a451c788b7440193e9fff9c1404cc2.png
[2cdbdd838fb741d5b896ff78120d45cd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/f8720af27d2548868326e76ef6122373.png
[6ad5fc0860d34d369db10652d998268a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/6bdfadfe3b8b473fae8df5aa88e1a8b5.png