如何手撸一个 Vue 3.0 异步函数 API？

<template>  <h2>useAsync example</h2></template> <script>export default {};</script>

// ... template
<script>async function loadStarship({ id }) {  const headers = { Accept: "application/json" };  const res = await fetch(`https://swapi.co/api/starships/${id}/`, { headers });  if (!res.ok) throw new Error(res);  return res.json();}
export default {};</script>

<template>  <div>    <h2>useAsync example</h2>    <div v-if="isLoading">Loading...</div>    <div v-else-if="error">Error!</div>    <div v-else>{{ data }}</div>  </div></template>
<script>import { value, onCreated } from "vue-function-api";
// ... same loadStarship function
export default {  setup() {    const isLoading = value(true);    const error = value(null);     const data = value(null); 
    onCreated(async () => {      try {         const result = await loadStarship({ id: 2 });        data.value = result;      } catch (e) {        error.value = e;      } finally {        isLoading.value = false;      }    });
    return {      isLoading,      error,       data,     };  } };</script>

// ... same template
<script>import { useAsync } from "vue-async-function";
// ... same loadStarship function 
export default {  setup() {    const { data, error, isLoading } = useAsync(loadStarship, { id: 2 });    return { data, error, isLoading };  }};</script>

// ... same template <script>import { useFetch } from "vue-async-function"; export default {  setup() {    const id = 2;    const { data, error, isLoading } = useFetch(`https://swapi.co/api/starships/${id}/`, {       headers: { Accept: "application/json" }    });    return { data, error, isLoading };  }};</script>