ToB企服应用市场:ToB评测及商务社交产业平台

标题: axios 各种方式的哀求 示例 [打印本页]

---

作者: 耶耶耶耶耶    时间: 2024-8-30 01:35
标题: axios 各种方式的哀求 示例
GET哀求

示例一：

• 服务端代码
  

1. @GetMapping("/f11")
2. public String f11(Integer pageNum, Integer pageSize) {
3.     return pageNum + " : " + pageSize;
4. }

复制代码

• 前端代码
  

1. <template>
2.   <div class="home">
3.     <button @click="getFun1">发送get请求</button>
4.   </div>
5. </template>
6. <script>
7.   import axios from 'axios'
8.   export default {
9.     name: 'Home',
10.     methods: {
11.       getFun1 () {
12.         axios.get('http://localhost/blog/f11?pageNum=12&pageSize=8').then(res => {
13.           console.log(res)
14.         })
15.       }
16.     }
17.   }
18. </script>

复制代码

示例二：

• 服务端代码
  

1. @GetMapping("/f12")
2. public String f12(Integer pageNum, Integer pageSize, HttpServletRequest request) {
3.     String token = request.getHeader("token");
4.     return pageNum + " : " + pageSize + " : " + token;
5. }

复制代码

• 前端代码
  

1. <template>
2.   <div class="home">
3.     <button @click="getFun2">发送get请求</button>
4.   </div>
5. </template>
6. <script>
7.   import axios from 'axios'
8.   export default {
9.     name: 'Home',
10.     methods: {
11.       getFun2 () {
12.         axios.get('http://localhost/blog/f12', {
13.           params: {
14.             pageNum: 12,
15.             pageSize: 8
16.           },
17.           headers: {
18.             token: 'asdf123456'
19.           }
20.         }).then(res => {
21.           console.log(res)
22.         })
23.       }
24.     }
25.   }
26. </script>

复制代码

GET方式采用接口方式携带参数，比如上面示例最终哀求服务器端的url是：

POST哀求

示例一：

• 服务端代码
  

1. @PostMapping("/f21")
2. public String f21(@RequestBody String param) {
3.     return param;
4. }

复制代码

• 前端代码
  

1. <template>
2.   <div class="home">
3.     <button @click="postFun1">发送post请求</button>
4.   </div>
5. </template>
6. <script>
7.   import axios from 'axios'
8.   export default {
9.     name: 'Home',
10.     data () {
11.       return {
12.         queryInfo1: {
13.           query: {
14.             username: 'zhangsan',
15.             password: '1234'
16.           }
17.         }
18.       }
19.     },
20.     methods: {
21.       postFun1 () {
22.         let _this = this
23.         axios.post('http://localhost/blog/f21', _this.queryInfo1).then(res => {
24.           console.log(res)
25.         })
26.       },
27.     }
28.   }
29. </script>

复制代码

结果：

示例二：

• 服务端代码
  

1. @PostMapping("/f21")
2. public String f21(@RequestBody String param) {
3.     return param;
4. }

复制代码

• 前端代码
  

1. <template>
2.   <div class="home">
3.     <button @click="postFun2">发送post请求</button>
4.   </div>
5. </template>
6. <script>
7.   import axios from 'axios'
8.   export default {
9.     name: 'Home',
10.     data () {
11.       return {
12.         queryInfo2: {
13.           username: 'zhangsan',
14.           password: '1234'
15.         }
16.       }
17.     },
18.     methods: {
19.       postFun2 () {
20.         let _this = this
21.         axios.post('http://localhost/blog/f21', {
22.           data: _this.queryInfo2
23.         }).then(res => {
24.           console.log(res)
25.         })
26.       }
27.     }
28.   }
29. </script>

复制代码

结果：

示例三：

• 服务端代码
  

1. @PostMapping("/f23")
2. public String f23(Integer aa, Integer bb,@RequestBody String query) {
3.     return aa + ": " + bb + ": " + query;
4. }

复制代码

• 前端代码
  

1. <template>
2.   <div class="home">
3.     <button @click="postFun3">发送post请求</button>
4.   </div>
5. </template>
6. <script>
7.   import axios from 'axios'
8.   export default {
9.     name: 'Home',
10.     data () {
11.       return {
12.         queryInfo2: {
13.           username: 'zhangsan',
14.           password: '1234'
15.         }
16.       }
17.     },
18.     methods: {
19.       postFun3 () {
20.         let _this = this
21.         axios.post('http://localhost/blog/f23', _this.queryInfo2, {
22.           params: { //params表示url中传递的参数，它会拼接在url后面
23.             aa: 11,
24.             bb: 22
25.           }
26.         }).then(res => {
27.           console.log(res)
28.         })
29.       }
30.     }
31.   }
32. </script>

复制代码

哀求的url为：http://localhost/blog/f23?aa=11&bb=22 ，结果：

注意上面三个示例中通报到背景的username和password参数采用下面方式背景是无法获取到的：

1. @PostMapping("/f22")
2. public String f22(String username, String password) {
3.     return username + " : " + password;
4. }

复制代码

缘故原由是axios.post默认情况下通报到背景的数据是JSON格式的，通过设置POST哀求头，可以告诉服务器哀求主体的数据格式为kv的形式，比如：a=aaaa&b=bbbb。
示例：设置POST哀求的格式

• 背景代码
  

1. @PostMapping("/f21")
2. public String f21(@RequestBody String param) {
3.     return param;
4. }

复制代码

• 前端代码
  

1. <template>
2.   <div class="home">
3.     <button @click="postFun1">发送post请求</button>
4.     <button @click="postFun2">发送post请求</button>
5.   </div>
6. </template>
7. <script>
8.   import axios from 'axios'
9.   axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
10.   import qs from 'qs'
12.   export default {
13.     name: 'Home',
14.     methods: {
15.       postFun1 () {
16.         let params = new URLSearchParams()
17.         params.append('username', 'zhangsan')
18.         params.append('password', '1234')
19.         axios.post('http://localhost/blog/f22', params).then(res => {
20.           console.log(res)
21.         })
22.       },
23.       postFun2 () {
24.         let params = qs.stringify({
25.           'username': 'zhangsan',
26.           'password': 1234
27.         })
28.         axios.post('http://localhost/blog/f22', params).then(res => {
29.           console.log(res)
30.         })
31.       },
32.     }
33.   }
34. </script>

复制代码

前端会将参数以kv字符串的形式发送到背景：username=zhangsan&password=1234。上面示例前端网页中哀求的也可以用下面控制器接收：

1. @PostMapping("/f22")
2. public String f22(String username, String password) {
3.     return username + " : " + password;
4. }

复制代码

Put

示例一：

• 前端
  

1. let _this = this
2. _this.$axios.put(`/user/${user.id}/status`).then(res => {  //注意，此处使用的是反斜杠
3.   console.log(res)
4. })

复制代码

• 后端
  

1. @PutMapping("/user/{userId}/status")
2. public Result changStatus(@PathVariable("userId") Integer userId){
4. }

复制代码

示例二：

• 前端
  

1. const param = {
2.   userId:1
3. }
4. _this.$axios.put('/user/update',param).then(res=>{
5.   console.log(res)
6. })

复制代码

• 后端
  

1. @PutMapping("/user/update")
2. public Result changStatus(@PathVariable("userId") Integer userId){
4. }

复制代码

patch

前端

1. const param={
2.   ids:[1,3,5,8]
3. }
4. _this.$axios.patch('/user/p',param).then(res=>{
5.   console.log(res)
6. }),

复制代码

Delete

前端

1. _this.$axios.delete('/user/delete',{
2.    params:{
3.      id:1
4.    }
5. }).then(res=>{
6.    console.log(res)
7. })

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4