Thank you for your explanation! I got the idea and I tried handling errors with try/catch in the composable:
the composable handles the error returning to you the result that you can display to a user in a friendly way. And you don't need to write try/catch in every place to achieve that as it is handled by the composable
But when I use such fetch composable in a Vue component and if there is a network or API error I get unhandled promise error messagein the console anyway if it is not wrapped in try/catch:
<scriptsetuplang="ts">import{onMounted}from"vue"import{useFetch}from"../composables/useFetch.js"const{data,loading,error,fetchData}=useFetch()onMounted(async ()=>{awaitfetchData("https://dummyjson.com/users")// unhandled promise error message if something wrong...})</script>
I got a bonus. If you use vite, you might experience different parsing behavior especially when using pug as template language.
In that regard, try to avoid typescript generics in templates.
this will works in vue, but not in the vite devserver since the vite-vue-plugin will complain about no end tag for template because it thinks the generic is also a tag.
I am a technology and informatics professor, as well as a full-stack web developer in constant training, specializing in both frontend and backend development
When using VueUse axios for example, you get a centralized approach to handle errors (the error property returned by the composable. This means that the composable handles the error returning to you the result that you can display to a user in a friendly way. And you don't need to write try/catch in every place to achieve that as it is handled by the composable.
If not using utility like the one above, you could create your own useApiClient composable that could be a wrapper around the fetch method that will also by default handle errors and populate a property to show you what the error code and message was.
Maybe something like creating a store for a domain that is mapped as a single boolean value? I have seen this approach few times in other projects where store was used as a default for handling state in the application and it resulted in basically writing 50 lines of code (for a store with state, mutations, getters) instead of a plain vue ref.
We're a place where coders share, stay up-to-date and grow their careers.
What do you mean by:
Would share an example, please?
Hey there, I have answered it here dev.to/jacobandrewsky/comment/2kcgd :)
Hi Jakub!
Thank you for your explanation! I got the idea and I tried handling errors with try/catch in the composable:
But when I use such fetch composable in a Vue component and if there is a network or API error I get
unhandled promise error messagein the console anyway if it is not wrapped in try/catch:How should this console error be handled?
Could you share your code of
useFetch.jscomposable? Maybe some configuration is missing from there :)await fetchData("dummyjson.com/users").catch(e => console.log(e))
I got a bonus. If you use vite, you might experience different parsing behavior especially when using pug as template language.
In that regard, try to avoid typescript generics in templates.
this will works in vue, but not in the vite devserver since the vite-vue-plugin will complain about no end tag for
templatebecause it thinks the generic is also a tag.Another tip is always you need use a Lot of if and else in your code maybe you should create custom directives in vue. Like some example
From
<Button v-if="user.isAdmin" />to<Button is-admin />I loved this post, thank you. Very useful tips.
Awesome tips! These will definitely help in writing cleaner and more efficient Vue.js code.
When using VueUse axios for example, you get a centralized approach to handle errors (the
errorproperty returned by the composable. This means that the composable handles the error returning to you the result that you can display to a user in a friendly way. And you don't need to writetry/catchin every place to achieve that as it is handled by the composable.If not using utility like the one above, you could create your own
useApiClientcomposable that could be a wrapper around thefetchmethod that will also by default handle errors and populate a property to show you what the error code and message was.Maybe something like creating a store for a domain that is mapped as a single boolean value? I have seen this approach few times in other projects where store was used as a default for handling state in the application and it resulted in basically writing 50 lines of code (for a store with state, mutations, getters) instead of a plain vue ref.