2.axios(发送get和post请求)

axios

1.客户端发送请求的方式

1)同步发送

1. form 表单使用action属性提交请求
2. 超链接a
3. js代码 location.href

特点:(等待缓冲)

​ 客户端发送请求 -> 客户端进入等待 -> 服务器响应

​ 服务器未响应请求时,客户端不能执行其他请求,体验感查

2)异步发送

1. 原生js发送异步请求

2. 用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) {
                //路径拼接参数id
                axios.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);
    }