Simple and small fetching library for vue3 projects.
Fetching data comes with managing state - showing loading indicator, rendering data after data arrives and handling error states.
npm install vue-fotch
Provides:
- data/loading/error variables of the request that can be used in the template
- setup the request first, perform the request later
- aborting request
- full typing support for the request:
Payload, SuccessResponse, ErrorResponse, UrlParams
- By default serializes to JSON, but can be changed
import { makeFotch } from "vue-fotch";
// Configuration for Fotch
const fotchConfig = {
defaultRequestInit: {
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
}
},
applyThens: (responsePromise: Promise<Response>) => responsePromise.then(res => res.json())
};
export const fotch = makeFotch(fotchConfig);
<script setup lang="ts">
// Create Fotch instance for GET request
const createUser = fotch<UserCreate, User, Err>('https://jsonplaceholder.typicode.com/users', {
method: 'POST',
});
const handleCreateUser = () => {
createUser.request({
name: '...',
// all fields required by UserCreate type
}).then(({ ok, err, data, networkErr }) => {
// You can work with response data here if you need.
if (ok) { /* data is type of User here */ }
if (err) { /* (status code >= 400) data is type of Err here */ }
if (!ok && !err) { /* we encountered network error networkErr is available here as string */ }
})
};
</script>
<template>
<button @click="handleCreateUser">Create user</button>
<!-- We need to manually unwrap the values because we are not destructuring them. -->
<div v-if="createUser.loading.value">Loading...</div>
<div v-else-if="createUser.hasError.value">Error: {{ createUser.error.value }}</div>
<div v-else-if="createUser.data.value">Data: {{ createUser.data.value }}</div>
</template>
- Get request example full vue app
- Post request example full vue app
- Posting payload other than JSON, excerpt from tests
npm run build
To build library for local development and testingnpm test
Run test suite with current buildnpm run build-lib
To build library for publishing (ESM and CJS outpus)
vue-fotch aims to be explicit when it comes to refetching the resource. And demands explicit calls to either request(payload)
or url(urlParams).request(payload)
. That means you can always set the fetcher in your setup script and build the request later.
useFetch is leaning on reactivity and effects to handle refetching. Also useFetch has much larger api surface supporting request intercepting and more.