Vue2利用Axios发起请求的详细过程记录
目录
- 前言
- Axios的安装和配置
- 发起简单GET请求
- 发起POST请求
- 发起简单POST请求
- 发起POST请求并携带参数(一)
- 发起POST请求并携带参数(二)
- 上传文件测试
- Axios的config配置
- baseURL
- timeout
- withCredentials
- 总结
前言 当你看到该文章时希望你已知晓什么是跨域请求以及跨域请求的处理,本文不会赘述
本文后台基于Springboot2.3进行搭建,Controller中不会写任何业务逻辑仅用于配合前端调试
Controller中使用的
R.success
为本人封装的工具类,代码在文末Axios的安装和配置 在项目目录下执行命令安装axios
npm install -S axios
打开src路径下的main.js文件,在文件中引入axios依赖并挂载到vue全局属性中
// 引用axios依赖import axios from 'axios'// 挂在到vue中,这里将axios挂载为request,在组件中就可以使用this.request来调用axios了Vue.prototype.request = axios;
发起GET请求调用的是axios中的get方法,点进去可以看到该方法接收了url和config两个对象
![Vue2利用Axios发起请求的详细过程记录](https://img.it610.com/image/info11/320e834afb684d9d843bc9e772d739a2.jpg)
文章图片
发起简单GET请求
@RestController@RequestMapping("/user")public class UserController {@GetMapping("/list")public R list() {return R.success("用户列表查询成功!"); }}
![Vue2利用Axios发起请求的详细过程记录](https://img.it610.com/image/info11/63c32cd017a249ddb00cc9d46b4718c2.jpg)
文章图片
发起简单GET请求并携带参数
@RestController@RequestMapping("/user")public class UserController {@GetMapping("/get")public R get(String id) {return R.success("用户获取成功!"); }}
selectOne() {let config = {params: {id: "1"}}// url后面跟上config对象,config对象中的params属性对应的就是请求参数this.request.get("http://localhost:8000/user/get", config).then(res => {console.log("res", res); }).catch(e => {console.log("e", e); })},
![Vue2利用Axios发起请求的详细过程记录](https://img.it610.com/image/info11/5f5a3219335144a48094aa4d08842abf.jpg)
文章图片
发起POST请求 发起POST请求调用的是axios中的post方法,点进去可以看到该方法的参数列表有三个对象
![Vue2利用Axios发起请求的详细过程记录](https://img.it610.com/image/info11/e6bff41eca4c451a99f6fb6b6617b67f.jpg)
文章图片
发起简单POST请求
@RestController@RequestMapping("/user")public class UserController {@PostMapping("/save")public R save() {return R.success("用户添加成功!"); }}
save() {// 发送简单POST请求与简单GET请求雷同,只需要将get方法修改为post方法即可this.request.post("http://localhost:8000/user/save").then(res => {console.log("res", res); }).catch(e => {console.log("e", e); })},
![Vue2利用Axios发起请求的详细过程记录](https://img.it610.com/image/info11/4fcf88bd58e349d0b74eb7aec3ebc4ef.jpg)
文章图片
发起POST请求并携带参数(一)
@RestController@RequestMapping("/user")public class UserController {/*** 一般发起POST请求都是将参数放在请求体中,然后在通过@RequestBody进行解析的* 这里我就不创建实体类了,直接使用Map集合来接收一下*/@PostMapping("/save")public R save(@RequestBody Map data) {return R.success("用户添加成功!").setAttribute("name", data.get("username")).setAttribute("pwd", data.get("password")); }}
save() {let data = https://www.it610.com/article/{username:"Java小学生丶",password: "123456789"}// 当看到参数列表的时候应该就能猜出来,直接将对象放在第二个参数上就可以// 需要注意的是这种方法携带的参数是放在请求体中的this.request.post("http://localhost:8000/user/save", data).then(res => {console.log("res", res); }).catch(e => {console.log("e", e); })},
![Vue2利用Axios发起请求的详细过程记录](https://img.it610.com/image/info11/778573d610544db28f62b797e7106da4.jpg)
文章图片
发起POST请求并携带参数(二)
上面说直接使用data传递参数是放在请求体中的,需要后端使用
@RequestBody
才能取到,这里将参数改为路径参数进行提交@RestController@RequestMapping("/user")public class UserController {@PostMapping("/save")public R save(String username, String password) {return R.success("用户添加成功!").setAttribute("name", username).setAttribute("pwd", password); }}
save() {let config = {params: {username: "Java小学生丶",password: "123456789"}}// 这里不使用data,改用config进行传参,还是将对象封装为params进行传递this.request.post("http://localhost:8000/user/save", null, config).then(res => {console.log("res", res); }).catch(e => {console.log("e", e); })},
![Vue2利用Axios发起请求的详细过程记录](https://img.it610.com/image/info11/a6d2fa1e9318494fb55db8b8f7cff717.jpg)
文章图片
上传文件测试 除开GET、POST请求之外,还有PUT、DELETE等等类型的请求,这里就不一一测试了,来了解一下上传文件
@RestController@RequestMapping("/user")public class UserController {@PostMapping("/upload")public R upload(MultipartFile file, String fileName) {// file对象就是接收到的文件,针对文件的处理逻辑省略不写...return R.success("文件上传成功!").setAttribute("fileName", fileName); }
![Vue2利用Axios发起请求的详细过程记录](https://img.it610.com/image/info11/02ffdddbc659499f873bd5be64752cd7.jpg)
文章图片
Axios的config配置 通过观察可以发现Axios的请求都会接收一个config对象,可以在
node_modules/axios/index.d.ts
文件看到该配置的详细信息:![Vue2利用Axios发起请求的详细过程记录](https://img.it610.com/image/info11/bce07b9369964bc1b0f336a09d665bb1.jpg)
文章图片
配置项有很多,我也是个新人好多没接触过,这里就简单测试几个其他随时用随时查,推荐一个Axios中文网
![Vue2利用Axios发起请求的详细过程记录](https://img.it610.com/image/info11/d5d384728fd24841b4dc50f42c05231a.jpg)
文章图片
baseURL
baseURL是个比较常用的属性,可以针对每个请求设置根地址,我们在发起请求时只需要关注请求路径即可
timeout
timeout也属于比较常用的配置项,用于配置请求的超时时间,单位是毫秒ms,设置为0代表不设置超时时间
【Vue2利用Axios发起请求的详细过程记录】
![Vue2利用Axios发起请求的详细过程记录](https://img.it610.com/image/info11/bab68c9effbb4042b5d943be8ada6fde.jpg)
文章图片
withCredentials
该属性同样比较常用,withCredentials的值为bool类型,用于设置是否允许携带Cookie,Axios请求默认是不允许携带Cookie的,可以通过Controller打印sessionID进行测试
![Vue2利用Axios发起请求的详细过程记录](https://img.it610.com/image/info11/0e675fa30bfd438797ff9f8142d4a717.jpg)
文章图片
![Vue2利用Axios发起请求的详细过程记录](https://img.it610.com/image/info11/1418ebb2df7f45e8b637bba729986300.jpg)
文章图片
Axios暂时就写到这里,了解这些日常开发基本不成问题了,用熟config后可以试着封装一个工具类
总结 到此这篇关于Vue2利用Axios发起请求的文章就介绍到这了,更多相关Vue2用Axios发起请求内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
推荐阅读
- 2020-04-07vue中Axios的封装和API接口的管理
- 接口|axios接口报错-参数类型错误解决
- Spring|Spring Boot 自动配置的原理、核心注解以及利用自动配置实现了自定义 Starter 组件
- 【万伽复利】什么是复利(如何利用复利赚钱?)
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- vue.js|vue中使用axios封装成request使用
- 苹果手机如何利用库乐队自制铃声
- 前端开发|Vue2.x API 学习
- “没有利用价值的人是很受冷遇的。”
- axios配置和实现请求中断