耀极客论坛

 找回密码
 立即注册
查看: 467|回复: 0

Vue2利用Axios发起请求的详细过程记录

[复制链接]

193

主题

176

帖子

276

积分

中级会员

Rank: 3Rank: 3

积分
276
发表于 2022-5-8 01:06:12 | 显示全部楼层 |阅读模式
  有很多时候你在构建应用时需要访问一个API并展示其数据,做这件事的方法有好几种,而使用基于promise的HTTP客户端axios则是其中非常流行的一种,这篇文章主要给大家介绍了关于Vue2利用Axios发起请求的详细过程,需要的朋友可以参考下

前言
  当你看到该文章时希望你已知晓什么是跨域请求以及跨域请求的处理,本文不会赘述
  本文后台基于Springboot2.3进行搭建,Controller中不会写任何业务逻辑仅用于配合前端调试
  Controller中使用的R.success为本人封装的工具类,代码在文末

Axios的安装和配置
  在项目目录下执行命令安装axios
  1. npm install -S axios
复制代码
  打开src路径下的main.js文件,在文件中引入axios依赖并挂载到vue全局属性中
  1. // 引用axios依赖
  2. import axios from 'axios'
  3. // 挂在到vue中,这里将axios挂载为request,在组件中就可以使用this.request来调用axios了
  4. Vue.prototype.request = axios;
复制代码
  发起GET请求调用的是axios中的get方法,点进去可以看到该方法接收了url和config两个对象


发起简单GET请求
  1. @RestController
  2. @RequestMapping("/user")
  3. public class UserController {
  4.     @GetMapping("/list")
  5.     public R list() {
  6.         return R.success("用户列表查询成功!");
  7.     }
  8. }
复制代码
  1. ‹template>
  2.     ‹div id="index">
  3.         ‹button @click="selectList">查询用户‹/button>
  4.     ‹/div>
  5. ‹/template>
  6. ‹script>
  7. export default {
  8.     name: "index",
  9.     methods: {
  10.         selectList() {
  11.             // 简单GET请求只需要传入URL就可以实现
  12.             this.request.get("http://localhost:8000/user/list").then(res => {
  13.                 console.log("res", res);
  14.             }).catch(e => {
  15.                 console.log("e", e);
  16.             })
  17.         }
  18.     }
  19. }
  20. ‹/script>
  21. ‹style>‹/style>
复制代码

  发起简单GET请求并携带参数
  1. @RestController
  2. @RequestMapping("/user")
  3. public class UserController {
  4.     @GetMapping("/get")
  5.     public R get(String id) {
  6.         return R.success("用户获取成功!");
  7.     }
  8. }
复制代码
  1. selectOne() {
  2.     let config = {
  3.         params: {id: "1"}
  4.     }
  5.     // url后面跟上config对象,config对象中的params属性对应的就是请求参数
  6.     this.request.get("http://localhost:8000/user/get", config).then(res => {
  7.         console.log("res", res);
  8.     }).catch(e => {
  9.         console.log("e", e);
  10.     })
  11. },
复制代码


发起POST请求
  发起POST请求调用的是axios中的post方法,点进去可以看到该方法的参数列表有三个对象


发起简单POST请求
  1. @RestController
  2. @RequestMapping("/user")
  3. public class UserController {
  4.     @PostMapping("/save")
  5.     public R save() {
  6.         return R.success("用户添加成功!");
  7.     }
  8. }
复制代码
  1. save() {
  2.     // 发送简单POST请求与简单GET请求雷同,只需要将get方法修改为post方法即可
  3.     this.request.post("http://localhost:8000/user/save").then(res => {
  4.         console.log("res", res);
  5.     }).catch(e => {
  6.         console.log("e", e);
  7.     })
  8. },
复制代码


发起POST请求并携带参数(一)
  1. @RestController
  2. @RequestMapping("/user")
  3. public class UserController {
  4.     /**
  5.      * 一般发起POST请求都是将参数放在请求体中,然后在通过@RequestBody进行解析的
  6.      * 这里我就不创建实体类了,直接使用Map集合来接收一下
  7.      */
  8.     @PostMapping("/save")
  9.     public R save(@RequestBody Map‹String, String> data) {
  10.         return R.success("用户添加成功!")
  11.                 .setAttribute("name", data.get("username"))
  12.                 .setAttribute("pwd", data.get("password"));
  13.     }
  14. }
复制代码
  1. save() {
  2.     let data = {
  3.         username: "Java小学生丶",
  4.         password: "123456789"
  5.     }
  6.     // 当看到参数列表的时候应该就能猜出来,直接将对象放在第二个参数上就可以
  7.     // 需要注意的是这种方法携带的参数是放在请求体中的
  8.     this.request.post("http://localhost:8000/user/save", data).then(res => {
  9.         console.log("res", res);
  10.     }).catch(e => {
  11.         console.log("e", e);
  12.     })
  13. },
复制代码


发起POST请求并携带参数(二)
  上面说直接使用data传递参数是放在请求体中的,需要后端使用@RequestBody才能取到,这里将参数改为路径参数进行提交
  1. @RestController
  2. @RequestMapping("/user")
  3. public class UserController {
  4.     @PostMapping("/save")
  5.     public R save(String username, String password) {
  6.         return R.success("用户添加成功!")
  7.                 .setAttribute("name", username)
  8.                 .setAttribute("pwd", password);
  9.     }
  10. }
复制代码
  1. save() {
  2.     let config = {
  3.         params: {
  4.             username: "Java小学生丶",
  5.             password: "123456789"
  6.         }
  7.     }
  8.     // 这里不使用data,改用config进行传参,还是将对象封装为params进行传递
  9.     this.request.post("http://localhost:8000/user/save", null, config).then(res => {
  10.         console.log("res", res);
  11.     }).catch(e => {
  12.         console.log("e", e);
  13.     })
  14. },
复制代码


上传文件测试
  除开GET、POST请求之外,还有PUT、DELETE等等类型的请求,这里就不一一测试了,来了解一下上传文件
  1. @RestController
  2. @RequestMapping("/user")
  3. public class UserController {
  4.     @PostMapping("/upload")
  5.     public R upload(MultipartFile file, String fileName) {
  6.         // file对象就是接收到的文件,针对文件的处理逻辑省略不写...
  7.         return R.success("文件上传成功!")
  8.                 .setAttribute("fileName", fileName);
  9.     }
复制代码
  1. ‹template>
  2.     ‹div id="index">
  3.         ‹!-- input:file 用于选择文件,选择文件后触发change事件调用fileChange方法 -->
  4.         ‹input type="file" id="file" @change="fileChange" />
  5.         ‹!-- 执行上传文件的方法 -->
  6.         ‹button @click="upload">点击上传‹/button>
  7.     ‹/div>
  8. ‹/template>
  9. ‹script>
  10. export default {
  11.     name: "index",
  12.     data() {
  13.         return {
  14.             file: null
  15.         }
  16.     },
  17.     methods: {
  18.         fileChange(event) {
  19.             // 当选择了某个文件后会触发该方法,将文件对象存放到file中
  20.             this.file = event.target.files[0];
  21.         },
  22.         upload() {
  23.             // 创建一个FormData对象,将file放进去,也可以放一些其他参数
  24.             let data = new FormData();
  25.             data.append('file', this.file);
  26.             data.append('fileName', "11223344.txt");
  27.             // 创建config对象,设置请求头类型为multipart/form-data
  28.             let config = {
  29.                 headers: {'Content-Type': 'multipart/form-data'}
  30.             }
  31.             // 发起请求携带刚刚创建的对象
  32.             this.request.post('http://localhost:8000/user/upload', data, config).then(res => {
  33.                 console.log("res", res);
  34.             })
  35.         }
  36.     }
  37. }
  38. ‹/script>
复制代码


Axios的config配置
  通过观察可以发现Axios的请求都会接收一个config对象,可以在node_modules/axios/index.d.ts文件看到该配置的详细信息:

  配置项有很多,我也是个新人好多没接触过,这里就简单测试几个其他随时用随时查,推荐一个Axios中文网


baseURL
  baseURL是个比较常用的属性,可以针对每个请求设置根地址,我们在发起请求时只需要关注请求路径即可
  1. ‹script>
  2. export default {
  3.     name: "index",
  4.     data() {
  5.         return {
  6.             config: {
  7.                 baseURL: "http://localhost:8000"
  8.             }
  9.         }
  10.     },
  11.     methods: {
  12.         test() {
  13.             let data = {name: "Java小学生丶"};
  14.             this.request.post("/user/save", data, this.config).then(res => {
  15.                 console.log("res", res);
  16.             });
  17.         },
  18.     }
  19. }
  20. ‹/script>
复制代码
timeout
  timeout也属于比较常用的配置项,用于配置请求的超时时间,单位是毫秒ms,设置为0代表不设置超时时间
  1. ‹script>
  2. export default {
  3.     name: "index",
  4.     data() {
  5.         return {
  6.             config: {
  7.                 baseURL: "http://localhost:8000",
  8.                 timeout: 5000
  9.             }
  10.         }
  11.     },
  12.     methods: {
  13.         test() {
  14.             let data = {name: "张涵哲"};
  15.             this.request.post("/user/save", data, this.config).then(res => {
  16.                 console.log("res", res);
  17.             });
  18.         },
  19.     }
  20. }
  21. ‹/script>
复制代码


withCredentials
  该属性同样比较常用,withCredentials的值为bool类型,用于设置是否允许携带Cookie,Axios请求默认是不允许携带Cookie的,可以通过Controller打印sessionID进行测试
  1. ‹script>
  2. export default {
  3.     name: "index",
  4.     data() {
  5.         return {
  6.             config: {
  7.                 baseURL: "http://localhost:8000",
  8.                 // 需要服务端进行配合
  9.                 withCredentials: true,
  10.                 timeout: 5000
  11.             }
  12.         }
  13.     },
  14.     methods: {
  15.         test() {
  16.             let data = {name: "Java小学生丶"};
  17.             this.request.post("/user/save", data, this.config).then(res => {
  18.                 console.log("res", res);
  19.             });
  20.         },
  21.     }
  22. }
  23. ‹/script>
复制代码

  Axios暂时就写到这里,了解这些日常开发基本不成问题了,用熟config后可以试着封装一个工具类

总结
  到此这篇关于Vue2利用Axios发起请求的文章就介绍到这了,更多相关Vue2用Axios发起请求内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-11-28 20:17 , Processed in 0.080503 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表