vue3之axios配置(阿飞)

最新推荐文章于 2025-10-20 14:55:49 发布

原创最新推荐文章于 2025-10-20 14:55:49 发布 · 1.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

web前端专栏收录该内容

15 篇文章

订阅专栏

本文介绍了在Vue3中如何配置和使用Axios进行HTTP请求，包括在main.js中全局引入Axios，设置默认基础URL，并通过全局属性和mixin方法使各个组件能访问Axios。同时，也讲解了Vue3的新特性——组合式API，在没有`this`的情况下如何通过`getCurrentInstance`获取组件实例并使用HTTP请求。最后，还展示了如何利用provide和inject进行依赖注入，使得子组件可以访问到Axios实例。

1.使用npm i axios --save

2.全局使用 main.js中

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { showMixin } from './mixins/index'
// import axios from 'vue-axios'
import axios from 'axios'
// import VueCompositionApi from '@vue/composition-api'
// createApp(App).config.productionTip = false
// createApp(App).use(store).use(router).use(VueCompositionApi).mount('#app')
// =========配置minxin
// createApp(App).mixin(showMixin).use(store).use(router).mount('#app')
// ===========配置axios
const app = createApp(App)
axios.defaults.baseURL = 'http://www.kymid.com/testphp/public/index.php/api/'
app.config.globalProperties.$http = axios
app.mixin(showMixin).use(store).use(router).mount('#app')

3.在组件中使用

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <button @click="mymixin">测试mixin</button>
    <button @click="fn">测试mixin</button>
  </div>
</template>
<script>
// import { showMixin } from '../mixins/index'
// export default {
//   mixins: [showMixin]
// }
  export default {
    created () {
      // this.$http.get('http://www.kymid.com/testphp/public/index.php/api/apis/about_get?lang=en').then(val => {
      this.$http.get('apis/about_get?lang=en').then(val => {
        console.log(val)
      })
    }
  }
</script>

方法二：在vue3中,新的组合式[API]没有this,那我们如果需要用到`this`怎么办?

getCurrentInstance 方法获取当前组件的实例，然后通过 ctx 或 proxy 属性获得当前上下文，这样我们就能在setup中使用router和vuex了

import { getCurrentInstance, onMounted } from 'vue'
 setup (props, context) {
      // 在
      const { proxy } = getCurrentInstance()
      onMounted(() => {
        getData()
      })
      function getData () {
        proxy.$http.get('apis/about_get?lang=en').then(res => {
          console.log(res)
        })
      }
    }

方法三：使用provide 和 inject 方法共享

main.js中：

const app = createApp(App)
axios.defaults.baseURL = 'http://www.kymid.com/testphp/public/index.php/api/'
app.config.globalProperties.$http = axios
// 方法三：
app.provide('$axios', axios)

组件中：

import { getCurrentInstance, onMounted, inject } from 'vue'
// import { inject } from 'vue'
  export default {
    created () {
      // 方式一： 在created中 直接使用this调用
      // this.$http.get('http://www.kymid.com/testphp/public/index.php/api/apis/about_get?lang=en').then(val => {
      this.$http.get('apis/about_get?lang=en').then(val => {
        console.log(val)
      })
    },
    setup (props, context) {
      // 在
      const { proxy } = getCurrentInstance()
      onMounted(() => {
        getData()
      })
      function getData () {
        proxy.$http.get('apis/about_get?lang=en').then(res => {
          console.log(res)
        })
      }
      // 方法三： 使用共享
      const $axios = inject('$axios')
      $axios.get('apis/about_get?lang=en').then((resp) => {
        console.log(resp)
      })
    }
  }