vue 发起axios请求

最新推荐文章于 2025-05-09 20:43:41 发布

原创最新推荐文章于 2025-05-09 20:43:41 发布 · 626 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

vue 专栏收录该内容

2 篇文章

订阅专栏

文章展示了在Vue.js环境中发起axios请求的两种方式：一种是普通开发中的直接引入axios，另一种是工程化开发中的全局配置和原型链挂载。通过在main.js中将axios挂载到Vue原型，可以使得所有组件都能方便地访问axios，同时设置axios的默认基础URL以简化代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.普通开发发起axios

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 1.引入vue -->
  <script src="./vue.js"></script>
  <!-- 4.引入axios -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
  <!-- 2.创建vue模板 -->
  <div id="app">
    <table border="1" cellpadding="0" cellspacing="0" width="800px">
      <thead>
        <tr>
          <th>序列</th>
          <th>名称</th>
          <th>作者</th>
          <th>出版社</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in books" :key="item.id">
          <th>{{item.id}}</th>
          <th>{{item.bookname}}</th>
          <th>{{item.author}}</th>
          <th>{{item.publisher}}</th>
        </tr>
      </tbody>
    </table>
  </div>
  <script>
    // 创建vue实例
    const vm = new Vue({
      el: '#app',
      data: {
        books: [],
      },
      // created生命周期函数内发起axios请求
      created() {
        axios({
          methods: 'get',//请求方式
          url: 'http://www.liulongbin.top:3006/api/getbooks',//请求地址
        }).then((res) => {
          this.books = res.data.data
          console.log(this.books)
        }, (rej) => {
          console.log('请求失败')
        })
      }
    })
  </script>
</body>

</html>

2.工程化开发发起axios请求

//--->App.vue
<template>
  <div id="app">
    <table border="1" cellpadding="0" cellspacing="0" width="800px">
      <thead>
        <tr>
          <th>序列</th>
          <th>名称</th>
          <th>作者</th>
          <th>出版社</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in books" :key="item.id">
          <th>{{ item.id }}</th>
          <th>{{ item.bookname }}</th>
          <th>{{ item.author }}</th>
          <th>{{ item.publisher }}</th>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
// 1.前提条件，下载axios (此项目已下载) npm i axios -S
// 2.导入axios
import axios from "axios";
export default {
  data() {
    return {
      books: [],
    };
  },
  // 3.在created生命周期函数中发起axios请求
  created() {
    axios({
      methods: "get", //请求方式
      url: "http://www.liulongbin.top:3006/api/getbooks", //请求地址
    }).then(
      (res) => {
        this.books = res.data.data;
        console.log(this.books);
      },
      (rej) => {
        console.log("请求失败");
      }
    );
  },
};
</script>

<style scoped>
#app {
  width: 800px;
  height: 400px;
  margin: 100px auto;
  border: 1px solid #ccc;
}
</style>

观察发现，要是多个组件都要发起axios请求，那么每个组件都引入axios是没有必要的，此时可以将axios挂载到vue原型上，这样每个组件都可以访问到axios(每个组件都相当于一个vue实例，那么实例能访问到自己原型上的方法毋庸置疑)，为了防止接口的根路径发生变动，还可以通过axios.defaults.baseURL设置axios请求访问的根路径

注意：当将axios挂在到vue原型上之后，调用axios方法需要通过this.axios调用

//--->main.js
import Vue from 'vue'
import App from './App.vue'
// 1.前提条件，下载axios (此项目已下载) npm i axios -S
// 2.全局导入axios
import axios from 'axios'
// 3.将axios挂载到vue原型上
Vue.prototype.axios = axios
// 4.全局配置axios的请求路径
axios.defaults.baseURL = 'http://www.liulongbin.top:3006'
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

//--->App.vue组件
<template>
  <div id="app">
    <table border="1" cellpadding="0" cellspacing="0" width="800px">
      <thead>
        <tr>
          <th>序列</th>
          <th>名称</th>
          <th>作者</th>
          <th>出版社</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in books" :key="item.id">
          <th>{{ item.id }}</th>
          <th>{{ item.bookname }}</th>
          <th>{{ item.author }}</th>
          <th>{{ item.publisher }}</th>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      books: [],
    };
  },

  created() {
    // 当在原型上挂在了axios后，调用axios方法需要通过this.axios调用
    this.axios({
      methods: "get", //请求方式
      url: "/api/getbooks", //请求地址
    }).then(
      (res) => {
        this.books = res.data.data;
        console.log(this.books);
      },
      (rej) => {
        console.log("请求失败");
      }
    );
  },
};
</script>

<style scoped>
#app {
  width: 800px;
  height: 400px;
  margin: 100px auto;
  border: 1px solid #ccc;
}
</style>