Axios 并发请求

//前端页面

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Axios的并发请求方式</title>
<!--引入axios的相关依赖-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>

</body>
<script>
//并发请求:在同一个时间发送多个不同的请求到后端服务,最后统一处理不同服务的响应结果
function findAll() {
return axios.get("http://127.0.0.1:8083/LQ/axios/findAll?id=7&username=王祖贤&password=123321&email=wangzuxian@163.com")
}
function save()
{
return axios.post("http://127.0.0.1:8083/LQ/axios/saves",{userName:'刘亦菲',passWord:3333})
}
//并行发送
// axios.all([findAll(),save()]);//用来处理并发请求 使用数组接收多个方法
axios.all([findAll(),save()])
.then(axios.spread(function (result1,result2) {
console.log(result1.data)
console.log(result2.data)
})//axios.spread用来统一处理多个并发请求的执行结果
);//all用来处理并发请求

</script>
</html>

//后端代码
@GetMapping("findAll")
@CrossOrigin//允许请求跨域
public List<Users> findAll(Integer id,String username,String password,String email){
List<Users> users=new ArrayList<>();
users.add(new Users(1,"李云迪","123456","liyundi@163.com"));
users.add(new Users(2,"迪丽热巴","123456","dilireba@163.com"));
users.add(new Users(3,"古力娜扎","123456","gulinazha@163.com"));
users.add(new Users(4,"韩雪","123456","hanxue@163.com"));
users.add(new Users(5,"宋祖儿","123456","songzur@163.com"));
users.add(new Users(id,username,password,email));
System.out.println("id ="+id);
System.out.println("username="+username);
System.out.println("password="+password);
System.out.println("email="+email);
return users;
}
@PostMapping("saves")
@CrossOrigin//跨域
public Map<String,Object> saves(@RequestBody Users users){

System.out.println("users="+users);
Map<String, Object> map=new HashMap<>();
map.put("success",true);
map.put("message","保存成功");
return map;
}


posted @ 2020-05-19 15:38  葵儿啊  阅读(254)  评论(0编辑  收藏  举报
/*粒子线条,鼠标移动会以鼠标为中心吸附的特效*/