Axios用法（get&post请求）
前端Get请求参数传递的方式
方式1: 通过?属性=属性值的方法拼接
方式2: 通过对象的方式实现数据传递
方式3: 利用restFul的结构实现参数传递.
**案例一：**通过?属性=属性值的方法拼接
需求：根据Id查询用户 url：url地址: http://localhost:8090/axios/findUserById
前端代码：
axios.get("http://localhost:8090/axios/findUserById?id=1")
.then(function(promise) {
console.log(promise.data)
})案例二：通过对象的方式实现数据传递
需求：根据age/sex查询用户信息 url：http://localhost:8090/axios/findUserByAS
前端代码：
let user = {
age: 21,
sex: "女"
}
axios.get("http://localhost:8090/axios/findUserByAS", {
params: user
})
.then(function(promise) {
console.log(promise.data)
})案例三：restful方式
需求：根据name/sex查询用户
前端代码
/* 根据name/sex查询用户 */
let name="貂蝉"
let sex="女"
let url3=`http://localhost:8090/axios/user/${name}/${sex}`
axios.get(url3).then(function(promise){
console.log(promise.data)
})注意：url使用``（反引号）包裹
后端代码
@GetMapping("user/{name}/{sex}")
public List<User> findUserByNS(User user){
return userService.user1(user);
}
}<select id="user1" resultType="User">
select * from demo_user where name=#{name} and sex=#{sex}
</select>Post请求
params只适用于get请求方式传参
参数在http协议中传输时会变成json串
@PostMapping("/saveUser")
public String saveUser(@RequestBody User user){
System.out.println(user);
userService.saveUser(user);
return "用户入库成功!!!";
}<script>
axios.defaults.baseURL = "http://localhost:8090"
/**
* 业务: 实现post请求入库操作 实现入库用户
* 知识点:
* 1.post请求中的参数 axios.post(url,user)
*
*/
// let url = "http://localhost:8090/axios/saveUser"
let user = {
name: "国庆快乐",
age: 72,
sex: "女"
}
axios.post("/axios/saveUser",user)
.then(function(promise){
console.log(promise.data)
})
</script>**axios定义公共请求前缀 **
axios.defaults.baseURL = "http://localhost:8090"async-await 关键字
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>post请求练习</title>
<script src="js/axios.js"></script>
</head>
<body>
<scritp>
<h1>post请求案例</h1>
<script>
axios.defaults.baseURL = "http://localhost:8090"
async function getUser(){
let promise = await axios.get("/getUser")
console.log(promise.data)
//解构赋值 固定写法 死记硬背
let {data: result} = await axios.get("/getUser")
console.log(result)
}
//2.调用函数
getUser()
</script>
</scritp>
</body>
</html>版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://blog.csdn.net/weixin_55740233/article/details/120560441
内容来源于网络，如有侵权，请联系作者删除！
