vue3 网络操作01

最新推荐文章于 2024-06-20 15:18:29 发布

爱生活，爱编程

最新推荐文章于 2024-06-20 15:18:29 发布

阅读量250

点赞数

分类专栏： typescript composition

本文链接：https://blog.csdn.net/qq_15009739/article/details/110679056

版权

本文介绍了如何在Vue3中进行网络操作，通过编写hook并在根组件中应用，实现了加载状态的管理。在数据加载前后，分别展示加载中、数据内容或加载失败信息。

摘要由CSDN通过智能技术生成

vue3 网络操作

先写一个hook

// 得到所有的列表
import {ref} from "vue"    
import axios from "axios"
import { v8IntrinsicIdentifier } from '@babel/types';
function getAllList(){
    const Loading = ref(true);
    const Loaded = ref(false);
    const result = ref(null);
    const error = ref(null);
    // 获取列表
    axios.get("https://api.ixiaowai.cn/tgrj/index.php")
    .then(value=>{
        // console.log(value)
        Loading.value = false;
        Loaded.value = true;
        result.value = value.data;
    }).catch(err=>{
        Loading.value = false;
        Loaded.value = true;
        result.value = err.message;
    })

    return {
       Loading,Loaded,result,error 
    }
}

// 返回这个函数
export default getAllList;

然后在根组件中使用就行了，这样就能实现加载前后的状态管理