vue3 自定义 hooks 优雅处理异步调用 ajax

首先自定义一个专门处理异步的 hooks

import {reactive, toRefs} from "vue";
const useAsyncFn = (fn)=>{
    let data = reactive({value:undefined ,loading:false,err:undefined});
    const callBack = (...args)=>{
        data.loading = true;
        fn(...args).then((res)=>{
            data.value = res;
        },(err)=>{
            data.err = err
        }).finally(()=>{
            data.loading = false;
        })
    }

    return [toRefs(data),callBack];
}

export default useAsyncFn

　　

用法为：

    let [data,callback] = useAsync(async(a)=>{
        let project = await fetch("/xxx?a="+a).then(res=>res.json());
        let iteration = await fetch("/xxx").then(res=>res.json());
        return {project,iteration}};
    })
    
      onMounted(()=>{
         callback(1)
      })
      

　　

 

另外，如果想自动触发调用，可以进异步封装如下：

import useAsyncFn from "./useAsyncFn"
const useAsync = (fn)=>{
    const [ data,callback ] = useAsyncFn(fn);
    callback();
    return data;
}
export default useAsync;

　　

则用法为：

 let res = useAsync(async()=>{
        let project = await fetch("/xxx").then(res=>res.json());
        let iteration = await fetch("/xxx").then(res=>res.json());
        return {project,iteration}};
    })