Vue3+vite中Axios的配置和使用方法

在Vue3中使用Axios可以通过以下步骤来完成配置和使用：

1. 安装Axios：

npm install axios

2. 在项目中创建一个api.js文件，并导入Axios和Vue：

import axios from 'axios'
import { reactive } from 'vue'

3. 创建一个响应式对象并将Axios实例化：

const state = reactive({data: null,loading: false,error: null
})const http = axios.create({baseURL: 'https://api.example.com/v1',timeout: 10000,headers: {'Content-Type': 'application/json'}
})

4. 在api.js文件中创建方法来发送HTTP请求：

const fetchData = async () => {state.loading = truetry {const response = await http.get('/data')state.data = response.data} catch (error) {state.error = error} finally {state.loading = false}
}

5. 在组件中导入api.js并调用方法：

import { fetchData } from '@/api'export default {name: 'MyComponent',async created() {await fetchData()}
}

6. 在模板中使用响应式数据：

以上就是在Vue3中使用Axios的配置和使用方法。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！