axios的hook的封装与TS中泛型的使用?

hook一般封装成函数,函数需要有返回值,在组件中进行hook的引入可以通过调用函数并设置其返回值,通常利用的是解构方式进行返回值的获取。

如果hook中有参数,那么可以进行函数参数的抽离与动态化。

函数如何和TS结合,可以有很多位置进行类型设定,比如说函数的参数数据类型、函数的返回值数据类型,函数的指定数据中的数据类型(泛型)。

// useAxios.ts
import { ref } from 'vue';
import axios, { AxiosResponse } from 'axios';

export function useAxios<T>() {
  const data = ref<T | null>(null);
  const error = ref<string | null>(null);
  const loading = ref<boolean>(false);

  const fetchData = async (url: string) => {
    loading.value = true;
    try {
      const response: AxiosResponse<T> = await axios.get(url);
      data.value = response.data;
      error.value = null;
    } catch (err) {
      error.value = err.message || 'An error occurred';
    } finally {
      loading.value = false;
    }
  };

  return { data, error, loading, fetchData };
}

猜你喜欢

转载自blog.csdn.net/summer___cold/article/details/132757472