vue3 ts使用axios
时间: 2023-09-17 20:09:04 浏览: 43
在Vue 3中使用TypeScript和Axios可以按照以下步骤进行:
1. 首先,安装Axios和TypeScript的声明文件:
```bash
npm install axios
npm install @types/axios
```
2. 创建一个用于封装Axios请求的服务(service):
```typescript
// services/ApiService.ts
import axios, { AxiosResponse } from 'axios';
export default {
async get(url: string): Promise<AxiosResponse> {
return axios.get(url);
},
async post(url: string, data: any): Promise<AxiosResponse> {
return axios.post(url, data);
},
// 添加其他请求方法,如PUT、DELETE等
};
```
3. 在需要发送请求的组件中使用服务:
```vue
<template>
<div>
<button @click="fetchData">Fetch Data</button>
<ul>
<li v-for="item in data" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import ApiService from '@/services/ApiService';
export default defineComponent({
data() {
return {
data: [],
};
},
methods: {
async fetchData() {
try {
const response = await ApiService.get('https://api.example.com/data');
this.data = response.data;
}