Web前端开发之VUE11——全局配置axios

最新推荐文章于 2025-06-21 07:08:38 发布

言行物恒

最新推荐文章于 2025-06-21 07:08:38 发布

阅读量627

点赞数 1

CC 4.0 BY-SA版权

分类专栏： # Web前端开发——Vue 文章标签：前端 node.js vue

本文链接：https://blog.csdn.net/HAC_SOUL/article/details/124242442

Web前端开发——Vue 专栏收录该内容

25 篇文章

订阅专栏

本文展示了如何在Vue.js应用中全局配置axios，包括设置默认基础URL和创建全局HTTP实例。通过这种方式，可以在组件中直接使用this.$http进行GET和POST请求，简化了API调用的代码。示例代码详细解释了配置和请求的方法。

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

全局配置axios：

示例代码：

//main.js中的配置
import axios from "axios";

const app=createApp(App)
axios.defaults.baseURL="https://www.escook.cn"//此处设置请求的根路径

//此处配置全局变量，后期使用this.$http调用，此处$http可自定义
app.config.globalProperties.$http=axios

app.mount('#app')

//get请求，post请求类似
<template>
  <div class="box">
    <h3>send get request</h3>
    <button @click="sendGet">get request</button>
  </div>
</template>

<script>
export default {
  name: "get",
  methods: {
    async sendGet() {
      const {data: ret} = await this.$http({
        method: "GET",
        url: '/api/get',
        params: {
          name: 'ls',
          age: 33,
        }
      })
      console.log(ret)
    }
  }
}
</script>

//post请求
<template>
  <div class="box">
    <h3>send post request</h3>
    <button @click="sendPost">get request</button>
  </div>
</template>

<script>
export default {
  name: "post",
  methods:{
     async sendPost(){
       const {data:ret}=await this.$http.post('/api/post',{name:'zs',age:20})
       console.log(ret)
    }
  }
}
</script>