axios请求REST接口示例

[](()axios 请求接口的方式

---

• get：一般多用于获取数据

• post：主要提交表单数据和上传文件

• put：对数据全部进行更新

• patch：只对更改过的数据进行更新

• delete：删除请求

[](()axios传参方式

--------- 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 ----------------------------------------------------------

• 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 => {

})

}

}

}

对应的请求

• 后端

参数：直接在参数表上接收

@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 => {

})

}

}

}

对应的请求

• 后端

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

@PostMapping(“/list”)

public Result list(@RequestBody String param){

}

[](()Put

---

[](()示例一：

• 前端

let _this = this