导航：首页 > 开发技术 >

Vue2是如何利用Axios发起请求

发表于：2025-01-19 作者：千家信息网编辑

千家信息网最后更新 2025年01月19日，本篇文章为大家展示了Vue2是如何利用Axios发起请求，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。前言当你看到该文章时希望你已知晓什么是跨域请求以及跨域请

千家信息网最后更新 2025年01月19日Vue2是如何利用Axios发起请求

本篇文章为大家展示了Vue2是如何利用Axios发起请求，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

前言

当你看到该文章时希望你已知晓什么是跨域请求以及跨域请求的处理，本文不会赘述

本文后台基于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 = {        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);    }