2.axios(发送get和post请求)
axios
文章目录
- axios
- 1.客户端发送请求的方式
- 1)同步发送
- 特点:(等待缓冲)
- 2)异步发送
- 特点:(缓冲不影响接下来操作)
- 2.axios发送请求
- 1)发送get请求
- 2)发送post请求
1.客户端发送请求的方式
1)同步发送
- form 表单使用
action属性提交请求 - 超链接
a - js代码
location.href
特点:(等待缓冲)
客户端发送请求 -> 客户端进入等待 -> 服务器响应
服务器未响应请求时,客户端不能执行其他请求,体验感查
2)异步发送
-
原生js发送异步请求
-
用vue一个组件 axios(使用的方式)
loadUsers() {//axios发送post请求,注意匹配接受请求的controller层对应方法注解@PostMapping("/queryUser")axios.post("/user/queryUser", this.param).then(response => {if (response.data.code === 200) {this.userList = response.data.data}if (response.data.code === 500) {alert("系统繁忙!!!")}})},
特点:(缓冲不影响接下来操作)
客户端发送请求后，不需要等待服务器的响应，可以做其他事情
2.axios发送请求
<!--使用axios发送请求步骤-->
<!--1.html中导依赖文件--><script src="/js/axios.min.js"></script>
1)发送get请求
适用: 发送请求传递参数1~2个,参数多时适用post
//根据id查询用户后更改数据edit(id) {//路径拼接参数idaxios.get("/user/queryById/" + id).then(response => {if (response.data.code === 200) {this.updateUser = response.data.data}})}
//使用@GetMapping具体请求注解,不使用@RequestMappint注解(一般注解在类上给类设置请求路径,防止方法路径冲突)
//对应的controller层接受请求的方法
@GetMapping("/del/{id}")//通过PathVariable注解映射路径上传递的参数给"id",接受请求路径的id与方法@PathVariable("id") 的参数名id一致public ResponseData update(@PathVariable("id") Integer id) {return userService.deleteById(id);}
//接受多个参数传递时
@GetMapping("/del/{userId}/{orderId}")
public ResponseData deleteOrderForUser(@PathVariable("userId") Integer userId, @PathVariable("orderId") Integer orderId) { // 使用userId和orderId执行删除操作 return userService.deleteOrderForUser(userId, orderId);
}
2)发送post请求
//param对象作为参数传递
axios.post("/user/queryUser", this.param).then(response => {if (response.data.code === 200) {this.userList = response.data.data}if (response.data.code === 500) {alert("系统繁忙!!!")}})},
//对应的java代码块
//@RequestBody接受请求传递的对象参数//头部模糊查询: 根据用户名或性别@PostMapping("/queryUser")public ResponseData queryUser(@RequestBody User user) {
// int i = 1 / 0;return userService.queryData(user);}
ryUser(@RequestBody User user) {
// int i = 1 / 0;return userService.queryData(user);}