vue3 ts配置axios
时间: 2024-08-28 17:03:44 浏览: 28
在 Vue3 中使用 TypeScript 配置 Axios,首先需要安装 axios 和 @types/axios 这两个依赖。你可以通过 npm 或者 yarn 来安装:
```bash
npm install axios @types/axios
# 或者
yarn add axios @types/axios
```
然后,在你的项目中创建一个 TypeScript 的 Axios 实例,并在入口文件如 main.ts 或 main.js 中进行配置。这里是一个简单的例子:
```typescript
// main.ts (如果是TS项目)
import axios from 'axios';
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
app.config.globalProperties.$axios = axios.create({
baseURL: process.env.VUE_APP_API_URL, // API基础URL
timeout: 5000, // 请求超时时间
headers: {
'Content-Type': 'application/json', // 默认请求头
},
});
export default app;
// 或者如果你在JS项目中
// main.js (如果是JS项目)
var axios = require('axios');
Vue.prototype.$axios = axios.create({
baseURL: 'https://api.example.com',
// 其他配置项...
});
```
现在,你在 Vue 组件中就可以直接使用 `$axios` 对象来进行 HTTP 请求了。例如:
```html
<script setup lang="ts">
import { ref } from 'vue';
import { useQuery } from '@vueuse/core';
import { $axios } from '@/store/api';
const apiUrl = ref('https://example.com/data'); // 这里替换为你实际的API地址
async function fetchData() {
const response = await $axios.get(apiUrl.value);
console.log(response.data);
}
</script>
<button @click="fetchData()">获取数据</button>
```