Test working of AbortController in fetch

Author: GaziYucel

src/components/Form/fields/FieldAffiliationsTest.stories.js

@@ -0,0 +1,13 @@
+import FieldAffiliationsTest from './FieldAffiliationsTest.vue';
+
+export default {
+	title: 'Forms/FieldAffiliationsTest',
+};
+
+export const Default = {
+	component: FieldAffiliationsTest,
+	render: () => ({
+		components: {FieldAffiliationsTest},
+		template: '<FieldAffiliationsTest/>',
+	}),
+};

src/components/Form/fields/FieldAffiliationsTest.vue

@@ -0,0 +1,31 @@
+<template>
+	<div>
+		<input
+			v-model="searchPhrase"
+			class="pkpFormField__input pkpFormField--text__input"
+		/>
+		&nbsp;
+		<button
+			class="pkpButton pkpFormField__input inline"
+			@click="executeFetch()"
+		>
+			Fetch
+		</button>
+		<pre>{{ searchResults }}</pre>
+	</div>
+</template>
+
+<script setup>
+import {ref} from 'vue';
+import {useFetch} from '@/composables/useFetch';
+
+const searchPhrase = ref('University');
+const searchResults = ref();
+const url = 'https://api.ror.org/v2/organizations?query=';
+
+async function executeFetch() {
+	const {data, isSuccess, fetch} = useFetch(url + searchPhrase.value);
+	await fetch();
+	if (isSuccess) searchResults.value = data;
+}
+</script>