VUE常用的四种请求方式(get,post,put,delete)

1、axios常用的四种请求方式说明

1.1 axios的get请求

get请求的方式，通常用作查询类的请求。

1.1.1 axios的get请求的链式加载

示例： axios.get(“url”,data)
.then(function(1))
.then(function(2))
.then(function(3))
链式加载解决了前端js的回调地狱问题，我们在发起ajax的请求的时候不需要再嵌套。
回调地狱问题简单说明:回调地狱问题是由于回调函数的嵌套引起的,当第一个ajax请求中的回调函数开始执行后,回调函数中继续嵌套ajax请求,这样嵌套会导致,第一次ajax的请求还没结束便开始了嵌套中的请求,最后返回的data数据是多层的,我们解析起来特别麻烦.

1.1.2 axios的get请求参数的传递

1.1.2.1 axios的get请求参数的传递–第一种restFul风格传递

 示例：

		/**
			 *  GET请求-简单参数的写法
			 * 需求: 根据ID查询数据
			 * URL: http://localhost:8090/axios/getUserById?id=100
			 * then(): 回调函数通过then返回 结构
			 */
		(1)	axios.get("http://localhost:8090/axios/getUserById/getUserById?id=100")
					 .then(function(result){
						 console.log(result.data)
					 })
					 
		(2)	axios.get('http://localhost:8090/axios/getUserById/{id}')
					 .then(function(result){
						 console.log(result.data)
					 })
	

get请求的参数我们首先可以将参数放到路径中，发起请求后，匹配后端的controller方法。(2) 示例的参数是写死的,可以测试的时候使用,这种不是restFul的风格
关于controller方法参数的说明：
	如果我们通过restFul传递的是单值参数，那么我们要加@PathVariable注解，通过 @PathVariable 可以将 URL 中占位符参数绑定到控制器处理方法的入参中：URL 中的 {xxx} 占位符可以通过@PathVariable(“xxx“) 绑定到操作方法的入参中。如果controller方法参数的名字跟前端传来的参数名字一致 则可以省略括号中的名字绑定 ，如@PathVariable Integer id 。
	示例：

 @DeleteMapping( "/deleteById/{id}")
    public void deleteById(@PathVariable Integer id){
        userService.deleteByID(id);
    }

1.1.2.2 axios的get请求参数的传递–第二种 简单拼接的方式传参

axios.get("http://localhost:8090/axios/getUserById?id="+id)
					 .then(function(result){
						 console.log(result.data)
					 })

这种传参的方式也是动态的,注意axios的回调函数的返回值result是promise对象,我们需要对pomise对象进行解析获取对象再获取对象中的属性.如:result.data.id.

1.1.2.3 axios的get请求参数的传递–第三种 以对象的方式传递

//封装对象
				let user = {
					name: "mysql",
					age: 18,
					sex: "女"
				}
			
				axios.get(
					"http://localhost:8090/axios/user/getUserObj",{params: user})
					.then(function(result){
						console.log(result.data)
					})
	axios.get("http://localhost:8090/axios/user/getUserObj",
				{
					//key: value  key固定写法 params 参数对象
					params: {
						//再写用户的参数
						name: "mysql",
						age: 18,
						sex: "女"
					}
				}).then(function(result){
					console.log(result.data)
				}) 

我们在传递对象参数时,params 是固定写法,我们可以先定义变量将对象封装,{params: user} 也可以直接将user对象的属性以key-value的形式直接写到参数中.

1.2 axios的post请求

1.什么时候使用post请求
答:一般采用form表单提交时,采用post请求类型
主要用于数据的新增操作

					2.get请求/post请求主要的区别
						get: 参数动态的拼接到URL地址中 ?id=xx&name=xxx 数据是可见的
						post: 一般采用post请求数据是涉密的

1.2.1 axios的post请求传参方式

1.2.1.1 axios的post请求参数的传递–对象的方式

/**
					 * post业务:
					 * 		实现用户的新增 传递User对象
					 * 
					 * URL地址:
					 * 		http://localhost:8090/axios/insertUser
					 * 总结: 如果需要对象传参  
					 * 				1.get请求采用 axios.get(url,{params: 对象})
					 * 				2.post请求 axios.post(url,对象)
					 */
					let user = {
						name: "post请求的语法",
						age: 20,
						sex: '女'
					}
					let url1 = "http://localhost:8090/axios/insertUser"
					axios.post(url1, user)
							 .then(function(result){
								 console.log(result.data)
							 })

注意:如果是对象的方式传参,后端controller的参数也必须为对象,并且要加注解@RequestBody
示例:

 @PutMapping("/updateUser")
    public void updateUser(@RequestBody User user){
        System.out.println(user);
        userService.updateUser(user);
    }

1.2.1.2 axios的post请求参数的传递–单值参数

 axios的post请求单值的参数,我们可以通过restFul风格如:

async deById(id){
		await axios.post("/vue/deleteById/"+id)
			this.getUserList()
	}

1.2.1.2 axios的post请求参数的传递–restFul风格

/**
 * post请求 restFul的写法
* 实现用户新增入库
* url: http://localhost:8090/axios/user/name/age/sex
*/
	let url2 = "http://localhost:8090/axios/user/redis/18/男"
	axios.post(url2)
		.then(function(result){
			console.log(result.data)
	 })
					
					
	//对比Axios中的post请求
	let url3 = "http://localhost:8090/axios/jQuery"
	$.post(url3,user,function(data){
		console.log(data)
	})

1.3 axios的put请求

axios的put请求方式,一般用于更新操作.
参数为对象示例:

async updateUser(){
		await axios.put("/vue/updateUser",this.user)
	}

1.4 axios的delete请求

传递的参数为单值示例:

	async deleteById(id){
			await axios.delete("/vue/deleteById/"+id)
			this.getUserList()
	}

 @DeleteMapping( "/deleteById/{id}")
    public void deleteById(@PathVariable Integer id){
        userService.deleteByID(id);
    }

1.5 axios中的get请求和post请求参数传递的区别

1. get: 参数动态的拼接到URL地址中 ?id=xx&name=xxx 数据是可见的
   post: 一般采用post请求数据是涉密的
2. 1.get请求采用 axios.get(url,{params: 对象})
   2.post请求 axios.post(url,对象)