useRequest.ts

// 引入axios
import axios from 'axios'
import { ref } from "vue"
// 发送ajax的请求
export default function<T> (url: string) {
    // 加载的状态
    const loading = ref(true)
    // 请求成功的数据
    const data = ref<T|null>(null)
    // 错误信息
    const errorMsg = ref(null)//坑 null类型
    // 发送请求
    axios.get(url).then(response => {
        // 改变加载状态
        loading.value = false
        data.value=response.data
    }).catch(error => {
          // 改变加载状态
        loading.value = false
        errorMsg.value=error.message||'未知错误'
        
    })
    return {
        loading,
        data,
        errorMsg
    }
}

app.vue

import useRequest from "./hooks/useRequest";
//定义泛型接口 规定函数返回data
interface Products {
  id: string;
  title: string;
  price: number;
}
 const { loading, data, errorMsg } = useRequest<Products[]>(
      "/data/products.json"
    ); //获取数组数据

products.json

[
    {
        "id":"1",
        "title":"华为手机",
        "price":3219
    },
    {
        "id":"002",
        "title":"小米手机",
        "price":1920
    }
]