axios请求REST接口示例

阳光穿透心脏的1/2处 2022-12-19 08:35 210阅读 0赞

## axios功能简介 ##

*  从浏览器中创建XMLHttpRequests
 *  从node.js创建http请求
 *  支持Promise API
 *  拦截请求和响应
 *  转换请求数据和响应数据
 *  取消请求
 *  自动转换JSON数据
 *  客户端支持防御XSRF

## axios 基础 ##

安装axios：

> cnpm install axios --save

在main.js中引入axios：

> import axios from ‘axios’  
> Vue.prototype.$axios = axios;

简介使用：

//get方法
    this.$axios.get(url,{ 
    	params: { 
    		id: 1001
    	}
    }).then(function(res){ 
    	//成功回调
    }).cache(function(err){ 
        //错误回调
    }) 
    
    //post方法
    this.$axios.post(url,{ 
    	id: 1001
    }).then(function(res){ 
    	//成功回调
    }).cache(function(err){ 
        //错误回调
    }) 
    
    //通过传递相关配置来进行请求
    this.$axios({ 
    	method: 'get', //post
    	url:'https://www.hcshow.online/',
    	params: { 
    		id: 1001
    	}
    }).then(function(res) { 
    	console.log(res)
    })

## axios 请求接口的方式 ##

*  get：一般多用于获取数据
 *  post：主要提交表单数据和上传文件
 *  put：对数据全部进行更新
 *  patch：只对更改过的数据进行更新
 *  delete：删除请求

## axios传参方式 ##

*  params:\{…\} 将参数加在URL上传参
 *  data:\{…\} 放在RequestBody中传参 并且 以Json格式发送

--------------------

## Get ##

### 示例一：拼串方式携带参数 ###

*  前端

let currentPage = 2
    let _this = this
    _this.$axios.get('/blog/list?currentPage=' + currentPage).then(res => {  //get方式请求
      console.log(res)
    })

*  后端

@GetMapping("/list")
    public Result list(@RequestParam(defaultValue = "1") Integer currentPage) { 
    
    }

### 示例二：params方式携带参数 ###

*  前端

data () { 
          return { 
            queryInfo: { //获取博客列表的查询参数
              query: 'Java Set',
              pageNum: 1, //当前的页数
              pageSize: 4 //当前每页显示多少条数据
            }
          }
        },
        methods: { 
          page (currentPage) { 
            let _this = this
            _this.$axios.get('/blog/list' ,{   //get请求
              params:_this.queryInfo
            }).then(res => { 
            
            })
          }
        }
      }

对应的请求  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5naGVjYWk1MjE3MTMxNA_size_16_color_FFFFFF_t_70_pic_center]

*  后端  
    参数：直接在参数表上接收

@GetMapping("/list")  //get请求
    public Result list(String query,Integer pageNum,Integer pageSize){ 
    
    }

## Post ##

### 示例一：直接传递参数 ###

*  前端

export default { 
        data () { 
          return { 
            queryInfo: {  //获取用户列表的查询参数
              query: { 
                'username': 'zhangsan',
                'password': '1234'
              }
            }
          }
        },
        methods: { 
          page (queryInfo) { 
            let _this = this
            _this.$axios.post('/user/list', queryInfo).then(res => {  //post方式请求
              console.info(res)
            })
          }
        }
      }

*  后端

处理用户请求的Controller

@PostMapping("/user/list")
    public Result list(@RequestBody(required = false) String param) throws JsonProcessingException { 
    	//解析前端传递过来的数据param
    	.....
    }

**注意**：实际测试下面方式不能获取到前端传递过来的数据

@PostMapping(value ="/login")
    public Result login(String username,String password){ 
    
        return null;
    }

### 示例二：data方式传递参数 ###

*  前端

data () { 
          return { 
            queryInfo: { //获取博客列表的查询参数
              query: 'Java Set',
              pageNum: 1, //当前的页数
              pageSize: 4 //当前每页显示多少条数据
            }
          }
        },
        methods: { 
          page (currentPage) { 
            let _this = this
            _this.$axios.post('/blog/list' ,{    //post请求
              data:_this.queryInfo
            }).then(res => { 
            })
          }
        }
    }

对应的请求  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5naGVjYWk1MjE3MTMxNA_size_16_color_FFFFFF_t_70_pic_center 1]

*  后端  
    接收Json字符串自己取出各参数（只要不是通过URL传参，参数都在 RequestBody 中）

@PostMapping("/list")
    public Result list(@RequestBody String param){ 
    }

## Put ##

### 示例一： ###

*  前端

let _this = this
    _this.$axios.put(`/user/${ user.id}/status`).then(res => {  //注意，此处使用的是反斜杠
      console.log(res)
    })

*  后端

@PutMapping("/user/{userId}/status")
    public Result changStatus(@PathVariable("userId") Integer userId){ 
    
    }

### 示例二： ###

*  前端

const param = { 
      userId:1
    }
    _this.$axios.put('/user/update',param).then(res=>{ 
      console.log(res)
    })

*  后端

@PutMapping("/user/update")
    public Result changStatus(@PathVariable("userId") Integer userId){ 
    
    }

## patch ##

*  前端

const param={ 
      ids:[1,3,5,8]
    }
    _this.$axios.patch('/user/p',param).then(res=>{ 
      console.log(res)
    }),

## Delete ##

*  前端

_this.$axios.delete('/user/delete',{ 
       params:{ 
         id:1
       }
     }).then(res=>{ 
       console.log(res)
     })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5naGVjYWk1MjE3MTMxNA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/081c3bf1f21f4aa5b2b26775de7d7d94.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5naGVjYWk1MjE3MTMxNA_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20201110084931188.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5naGVjYWk1MjE3MTMxNA==,size_16,color_FFFFFF,t_70#pic_center