Axios用法(get&post请求)

x33g5p2x  于9个月前 转载在 iOS  
字(2.2k)|赞(0)|评价(0)|浏览(96)

前端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>

相关文章