📄 /composables/use-promise.js
import { ref } from "@vue/composition-api";
export default function usePromise(fn) { // fn is the actual API callconst results = ref(null);const loading = ref(false);const error = ref(null);const createPromise = async (...args) => { // Args is where we send in searchInputloading.value = true;error.value = null;results.value = null;try {results.value = await fn(...args); // Passing through the SearchInput} catch (err) {error.value = err;} finally {loading.value = false;}};return { results, loading, error, createPromise };
}
Notice how this function holds the reactive references as well as a function that wraps the API call, along with any arguments that need to be passed into the API call. Now to use this code:
📄 /src/App.vue
<template><div>Search for <input v-model="searchInput" /> <div><p>Loading: {{ getEvents.loading }}</p><p>Error: {{ getEvents.error }}</p><p>Number of events: {{ getEvents.results }}</p></div></div>
</template>
<script>
import { ref, watch } from "@vue/composition-api";
import eventApi from "@/api/event.js";
import usePromise from "@/composables/use-promise";
export default {setup() {const searchInput = ref("");const getEvents = usePromise(search =>eventApi.getEventCount(search.value));watch(searchInput, () => {if (searchInput.value !== "") {getEvents.createPromise(searchInput);} else {getEvents.results.value = null;}});return { searchInput, getEvents };}
};
</script>
