Vue2利用Axios发起请求的详细过程记录 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两个对象

文章图片

发起简单GET请求

@RestController@RequestMapping("/user")public class UserController {@GetMapping("/list")public R list() {return R.success("用户列表查询成功！"); }}

文章图片

发起简单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); })},

文章图片

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

文章图片

发起简单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); })},

文章图片

发起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); })},

文章图片

发起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); })},

文章图片

上传文件测试除开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); }