axios 各种方式的哀求 示例

耶耶耶耶耶  金牌会员 | 2024-8-30 01:35:35 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 766|帖子 766|积分 2298

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企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

耶耶耶耶耶

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表