vue3如何实现挂载并使用axios

当我们使用Vue3框架开发应用程序时，我们需要使用Axios实现数据通信。在Vue3中，Axios是一个可以在后台执行请求的JavaScript库。在本篇攻略中，我们将会介绍如何在Vue3中挂载及使用Axios。以下分为以下五个步骤：

1. 安装Axios
   在Vue3中使用Axios需要安装Axios。你可以通过npm或者yarn进行安装Axios：

npm install axios

或

yarn add axios

1. 创建Axios实例
   可以通过axios.create来创建一个实例,并配以baseURL、timeout等属性，方便后续调用时进行统一配置：

import axios from 'axios'

const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000
})

1. 挂载并使用Axios
   在Vue3中可以通过provide和inject API进行全局注入或局部注入：

//全局注入
import { createApp } from 'vue'
import App from './App.vue'
import axiosInstance from './axiosInstance.js'

const app = createApp(App)
app.provide('axios', axiosInstance)
app.mount('#app')

//局部注入
import { inject } from 'vue'

export default {
  setup() {
    const axios = inject('axios')
    axios.get('/user')
      .then(function(response) {
        console.log(response.data)
      })
      .catch(function(error) {
        console.log(error)
      })
  }
}

1. 使用axios封装函数
   在应用中我们经常会用到一些请求的模板代码，比如拦截器，统一处理请求等等。我们可以使用axios给我们提供的拦截器机制和脚手架的机制来对axios进行封装。示例代码如下：

import axios from 'axios'

const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000
})

instance.interceptors.request.use(config => {
  // 统一的请求头处理
  return config
}, error => {
  return Promise.reject(error)
})

instance.interceptors.response.use(response => {
  // 统一的响应处理
  return response
}, error => {
  return Promise.reject(error)
})

export default instance

1. 在应用中使用axios
   我们现在已经完成了axios的挂载并封装了一些request请求，现在可以在应用程序中简单地使用它来处理HTTP请求。示例代码如下：

import { reactive } from 'vue'
import axiosInstance from '../axiosInstance'

export default {
  setup() {
    const state = reactive({
      loading: false,
      data: []
    })

    const fetchItems = () => {
      state.loading = true
      axiosInstance.get('/items')
        .then(response => {
          state.data = response.data
        })
        .catch(error => {
          console.log(error)
        })
        .finally(() => {
          state.loading = false
        })
    }

    return {
      state,
      fetchItems
    }
  }
}

以上就是关于Vue3中如何使用和挂载Axios的完整攻略，希望对你有所帮助！