vue3+ts封装axios的最佳实践：拒绝过度封装

vue3+ts封装axios的最佳实践：拒绝过度封装

在 Vue 3 中使用 TypeScript 和 Axios 封装网络请求的最佳方式可以通过创建一个单独的 axios 实例并将其封装为可重用的模块来实现。以下是一个简单的示例：

1.创建一个 axios 实例

import axios, { AxiosRequestConfig, AxiosInstance, AxiosResponse } from 'axios';
​
const axiosInstance: AxiosInstance = axios.create({
  baseURL: 'https://api.example.com/',
  timeout: 5000,
});
​
// 添加请求拦截器
axiosInstance.interceptors.request.use(
  (config: AxiosRequestConfig) => {
    // 在发送请求之前做些什么
    return config;
  },
  (error: any) => {
    // 处理请求错误
    return Promise.reject(error);
  },
);
​
// 添加响应拦截器
axiosInstance.interceptors.response.use(
  (response: AxiosResponse) => {
    // 对响应数据做点什么
    return response;
  },
  (error: any) => {
    // 处理响应错误
    return Promise.reject(error);
  },
);
​
export default axiosInstance;
​

在上述代码中，我们使用 axios.create() 创建了一个 axios 实例，并设置了基本 URL 和请求超时时间。我们还添加了请求和响应拦截器，以在请求和响应发生时添加自定义逻辑。最后，我们将该实例导出，以便其他模块可以使用

2. 创建一个封装模块

创建api.ts

import axiosInstance from './axios-instance';
​
export interface ApiResult<T> {
  code: number;
  message: string;
  data: T;
}
​
export async function get<T>(url: string, params?: any): Promise<ApiResult<T>> {
  const response = await axiosInstance.get<ApiResult<T>>(url, { params });
  return response.data;
}
​
export async function post<T>(url: string, data?: any): Promise<ApiResult<T>> {
  const response = await axiosInstance.post<ApiResult<T>>(url, data);
  return response.data;
}
​
export async function put<T>(url: string, data?: any): Promise<ApiResult<T>> {
  const response = await axiosInstance.put<ApiResult<T>>(url, data);
  return response.data;
}
​
export async function del<T>(url: string, params?: any): Promise<ApiResult<T>> {
  const response = await axiosInstance.delete<ApiResult<T>>(url, { params });
  return response.data;
}
​

在上述代码中，我们导入了我们之前创建的 axios 实例，并创建了四个函数来执行不同的 HTTP 请求。我们还定义了一个 ApiResult 接口，以在我们的应用程序中标准化 API 响应格式。

使用这个封装模块的好处是，我们可以使用 TypeScript 为每个请求提供类型安全，并避免在每个请求中重复设置基本 URL 和请求超时时间。另外，我们还可以为所有请求提供一个统一的错误处理逻辑，以便在需要时轻松地更改应用程序的行为。

3.在 Vue 组件中使用封装模块

现在我们已经创建了一个可重用的 axios 实例和一个封装模块，接下来我们可以在 Vue 组件中使用它们来发出网络请求。

首先，我们需要在组件中导入封装模块：

import { defineComponent } from 'vue';
import { get, post } from '@/api';
​

然后，我们可以使用这些函数来发出 GET 和 POST 请求：

export default defineComponent({
  async mounted() {
    try {
      const response = await get('/users');
      console.log(response.data);
    } catch (error) {
      console.error(error);
    }
​
    try {
      const response = await post('/users', { name: 'John', age: 30 });
      console.log(response.data);
    } catch (error) {
      console.error(error);
    }
  },
});
​

在上述代码中，我们使用 await 关键字来等待异步请求完成，并使用 try...catch 语句来处理请求中的错误。

使用封装模块的好处是，我们可以在整个应用程序中重复使用这些函数，而不必在每个组件中单独设置 axios 实例和处理错误。另外，我们还可以轻松地在应用程序中更改 API 响应格式和错误处理逻辑，以提高代码的可维护性。