axios的使用与封装详细教程

一、axios使用方式

在 Spring Boot + Vue 的项目中使用 Axios，你需要在 Vue 项目中安装 Axios 库，因为 Axios 是一个前端 JavaScript 库，用于发送 HTTP 请求和处理响应数据，而与 Spring Boot 后端的 Java 代码是分离的。

通过命令行在 Vue 项目中安装 Axios：

Axios 官网： https://www.axios-http.cn/docs/intro

npm install axios --save
1

这将安装最新版本的 Axios 库，并将其添加到你的 package.json 文件中。一旦安装了 Axios，你可以在 Vue 组件中引入它，如下所示：

import axios from 'axios'
1

然后，你可以在需要发送 HTTP 请求的地方使用 Axios，例如：

<script>
    import axios from 'axios'
    export default {
        name: "Home",

        data() {
          return{
              tableData: []  // 存储从数据库中获取的数据
          }
        },
        mounted() {
            axios.get('http://localhost:8080/info/all') // 发送HTTP GET请求到服务器端的接口
                .then(response => {
                    this.tableData = response.data.t; // 将获取的数据存储到data属性中
                    console.log(this.tableData)
                })

        },

    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

二、axios在main.js配置

通过在 Vue 原型上注册 Axios 实例，可以使其在整个 Vue 应用中可用，方便统一管理和调用 API 请求。在组件中可以直接使用 this.$axios 来发送请求，而无需再次导入和创建 Axios 实例。

import axios from "axios";

const instance = axios.create({
    // 访问路径的时候加一个基础路径
    baseURL: 'http://localhost:8080/'
});
//起一个名字注册到Vue里面
Vue.prototype.$axios=instance;

1
2
3
4
5
6
7
8
9

在vue中使用方法

去除了 import axios from ‘axios’
更改了 this.$axios.get(‘info/all’)

<script>
    // import axios from 'axios'
    export default {
        name: "Home",
        data() {
          return{
              tableData: []  // 存储从数据库中获取的数据
          }
        },
        mounted() {
            this.$axios.get('info/all') // 发送HTTP GET请求到服务器端的接口
                .then(response => {
                    this.tableData = response.data.t; // 将获取的数据存储到data属性中
                    console.log(this.tableData)

                })

    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19