axios( v2.3.0) 返回类型与ref<T | null>不匹配

来源:3-13 模块化难度上升 - useURLLoader

weixin_慕前端3116868

2021-10-15

老师好!因为新版本的axios.get方法会自动返回unknown类型的数据,所以我尝试使用as类型转换将得到的value.data转换为T类型的数据

result.value = value.data as T;

但是这样做会收到ts报错说类型不匹配,左边是ref<unwrapRef | null>类型 ,我这里还是简单粗暴的用类型转换解决了报错,组件那里也可以正常的获取到返回值result的类型。请问这里还有其他的解决方案吗?

成功代码

function useUrlLoader<T>(url: string) {
    const loaded = ref(false);
    const loading = ref(false);
    const result = ref<T | null>(null);
    const error = ref(null);

    axios.get<T>(url).then((value) => {
        loaded.value = true;
        loading.value = false;
        result.value = value.data as UnwrapRef<T>;
    }).catch((err) => {
        error.value = err;
        loading.value = false;
    })

    return { loaded, loading, result, error };
}

错误信息:
图片描述

写回答

1回答

张轩

2021-10-15

同学你好 非常感谢你的反馈 你的修改没有问题

这里我们还可以使用一行 暂时将 rawData.data 修改为 any 类型,就不需要类型断言了,当然目的和结果是一样的。

axios.get 接受一个泛型,对应的就是 rawData.data

axios.get<any>(url).then((rawData) => {
    loading.value = false
    loaded.value = true
    result.value = rawData.data
}).catch(e => {
    error.value = e
    loading.value = false
})

亲测可用

0
0

Vue3 + TS 仿知乎专栏企业级项目

带你完成前后端分离复杂项目,率先掌握 vue3 造轮子技能

3142 学习 · 2313 问题

查看课程