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

您所在的位置：网站首页 › 清空是怎么写 › VUE常用的四种请求方式(get,post,put,delete)

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

2023-10-10 08:15| 来源: 网络整理| 查看: 265

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请求参数传递的区别 get: 参数动态的拼接到URL地址中 ?id=xx&name=xxx 数据是可见的 post: 一般采用post请求数据是涉密的1.get请求采用 axios.get(url,{params: 对象}) 2.post请求 axios.post(url,对象)

【本文地址】

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

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

今日新闻

推荐新闻