使用ts封装axios

Sure, 封装 Axios 可以让我们更好地管理 API 调用，避免大量重复的代码，提高应用程序的可维护性和可扩展性。而 TypeScript 可以帮助我们在代码编写和维护过程中，避免一些 Bug，增加代码的可读性和可维护性。因此，将 Axios 和 TypeScript 结合在一起封装，是一种非常好的编码实践。

相关问题

vue3中使用ts封装axios给出代码

当然，我非常乐意回答你的问题！以下是一个使用 TypeScript 封装 Axios 的 Vue3 代码示例：

import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';
import { reactive } from 'vue';

interface ResponseData<T = any> {
  code: number;
  message: string;
  data: T;
}

export interface Result<T = any> {
  loading: boolean;
  error: string;
  response: ResponseData<T> | null;
  fetchData: (axiosConfig?: AxiosRequestConfig) => Promise<void>;
}

export function useAxios<T = any>(url: string, axiosConfig: AxiosRequestConfig = {}): Result<T> {
  const state = reactive({
    loading: false,
    error: '',
    response: null,
    fetchData: async (axiosConfig?: AxiosRequestConfig) => {
      state.loading = true;
      try {
        const response: AxiosResponse<ResponseData<T>> = await axios.request({
          url,
          ...axiosConfig,
        });
        state.response = response.data;
      } catch (error) {
        state.error = error.message;
      } finally {
        state.loading = false;
      }
    },
  });

  state.fetchData(axiosConfig);

  return state;
}

希望这个代码示例可以帮到你！

vue3中使用ts封装axios，并给出代码

好的，关于vue3中使用ts封装axios的代码，代码如下所示：

import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';

export interface ResponseData {
  code: number;
  data: any;
  msg: string;
}

export interface RequestConfig extends AxiosRequestConfig {}

class Axios {
  private axios: AxiosInstance;

  constructor() {
    this.axios = axios.create({
      baseURL: 'https://example.com',
      timeout: 10000,
    });
    this.init();
  }

  private init() {
    this.axios.interceptors.request.use(
      (config: RequestConfig) => {
        // 在请求发送之前做些什么
        return config;
      },
      (error: any) => {
        // 对请求错误做些什么
        return Promise.reject(error);
      }
    );

    this.axios.interceptors.response.use(
      (response: AxiosResponse<ResponseData>) => {
        // 对响应数据做些什么
        return response.data.data;
      },
      (error: any) => {
        // 对响应错误做些什么
        return Promise.reject(error);
      }
    );
  }

  public async request<T>(config: RequestConfig): Promise<T> {
    const response = await this.axios.request<ResponseData>(config);
    return response as unknown as T;
  }
}

export default new Axios();

希望这个代码对您有所帮助。如果有其他问题，也欢迎随时问我哦~