Vue3 + TypeScript + Axios封装教程
概述
本教程将指导你如何在Vue3项目中使用TypeScript和Axios进行网络请求的封装。以下是整个流程的步骤：
| 步骤 | 描述 |
|---|---|
| 步骤1 | 创建Vue3项目 |
| 步骤2 | 安装TypeScript和Axios依赖 |
| 步骤3 | 创建网络请求封装文件 |
| 步骤4 | 在组件中使用封装的网络请求 |
现在让我们逐步执行这些步骤。
步骤1：创建Vue3项目
首先，你需要创建一个Vue3项目。可以使用Vue CLI来快速创建一个基础的Vue3项目。打开终端并执行以下命令：
vue create vue3-ts-axios
然后选择默认选项来创建一个基础的Vue3项目。
步骤2：安装依赖
在项目目录下，打开终端并执行以下命令来安装TypeScript和Axios依赖：
cd vue3-ts-axios
npm install --save-dev typescript @vue/cli-plugin-typescript
npm install axios
步骤3：创建网络请求封装文件
在src目录下创建一个新的文件夹api，然后在该文件夹中创建一个名为http.ts的文件。这个文件将包含我们封装的网络请求代码。
在http.ts中，我们需要引入Axios，并创建一个实例来进行网络请求。首先，我们需要导入Axios：
import axios from 'axios';
然后，我们创建一个Axios实例，并设置一些默认的请求配置，如设置请求超时时间：
const instance = axios.create({
timeout: 5000, // 设置请求超时时间为5秒
});
接下来，我们需要导出一个用来发送请求的函数。我们可以使用TypeScript的泛型来定义函数的返回类型。下面是一个简单的例子：
export function http<T>(config: AxiosRequestConfig): Promise<T> {
return instance(config)
.then((response) => {
return response.data;
})
.catch((error) => {
console.error('网络请求错误:', error);
throw error;
});
}
在上面的代码中，我们使用config参数来传递请求的配置，然后使用instance(config)来发送请求。如果请求成功，我们返回响应数据；如果请求失败，我们在控制台打印错误，并抛出错误。
步骤4：在组件中使用封装的网络请求
现在我们已经完成了网络请求的封装，我们可以在Vue组件中使用它了。
首先，我们需要导入封装的网络请求函数和需要的类型定义。在main.ts中导入以下代码：
import { createApp } from 'vue';
import App from './App.vue';
import { http } from './api/http';
接下来，在需要发送请求的组件中，我们可以使用http函数发送请求。以下是一个简单的例子：
export default {
data() {
return {
users: [] as User[], // 定义一个空数组来存储用户列表
};
},
mounted() {
this.fetchUsers(); // 在组件挂载时调用fetchUsers函数
},
methods: {
async fetchUsers() {
try {
const users = await http<User[]>({
url: '/users', // 请求的URL
method: 'GET', // 请求方法
});
this.users = users; // 将响应数据赋值给组件的数据
} catch (error) {
console.error('获取用户列表失败:', error);
}
},
},
};
在上面的代码中，我们在组件的data选项中定义了一个名为users的数组来存储用户列表。在组件的mounted生命周期钩子中，我们调用fetchUsers函数来获取用户列表。
fetchUsers函数使用http函数发送GET请求，并将响应的用户列表赋值给users数组。如果请求失败，我们在控制台打印错误。
这样，我们就完成了Vue3 + TypeScript + Axios的封装教程。你现在可以在Vue3项目中使用封装的网络请求函数来发送请求了。
