在Vue中使用axios_单页面axios-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44001906/article/details/125683689

本文介绍了如何在Vue项目中安装并使用axios库，包括全局和局部引入的方式，以及在组件中调用axios进行数据交互的基本操作。

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

在vue中使用axios

安装
```
npm install axios
```

引入

全局引入：在 main.js 中引入 axios（也可以在单页面局部引入）

import axios from "axios"
Vue.prototype.$axios = axios//设置全局变量axios

在组件中使用

<template>
  <div class="demo">
    <button @click="toGet">get</button>
    <button @click="toPost">post</button>
  </div>
</template>

<script>
export default {
  name: "Demo",
  components: {},
  data() {
    return {};
  },
  methods: {
    toGet() {
      // this.$axios
      //   .get("http://152.136.148.31:7401/portal/gnvq/getCatList")
      //   .then(function (response) {
      //     console.log(response);
      //   })
      //   .catch(function (error) {
      //     console.log(error);
      //   });
      // 或通过向 axios 传递相关配置来创建请求
      this.$axios({
        method: "get",
        url: "http://152.136.148.31:7401/portal/gnvq/getCatList",
      })
        .then(function (response) {
          console.log(response);
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    toPost() {
      this.$axios.post('http://152.136.148.31:7401/portal/teacher/query', "pageNumber=0&pageSize=2")
          .then(function (response) {
              console.log(response);
          })
          .catch(function (error) {
              console.log(error);
          });
      // 或通过向 axios 传递相关配置来创建请求
      // this.$axios({
      //   method: "post",
      //   url: "http://152.136.148.31:7401/portal/teacher/query",
      //   data: "pageNumber=0&pageSize=2",
      // })
      //   .then(function (response) {
      //     console.log(response);
      //   })
      //   .catch(function (error) {
      //     console.log(error);
      //   });
    },
  },
};
</script>