@isense-development/axios-wrapper v2.0.1

File upload module

This module give you a ready to use uploader for single documents, pictures or files.

Installation

npm i @isense-development/axios-wrapper

Version Compatibility

Quasar	@isense-development/axios-wrapper

Auto generated alias

In the quasar.conf.json the alias is automatically created '~axios-wrapper' based on the module name in the env.json file

Usage

import axiosWrapper from '~axios-wrapper/axiosWrapper';

const { isPending, isInitialLoadDone ,axiosGet, axiosPost, axiosPut, axiosDelete } = axiosWrapper();

isPending

This is the value that keeps track of how many axios requests are pending. It is an integer that holds a value from 0 to .... as it wil always add 1 for each made request.

Als long the value is not 0 you can use this variable to show a loading state.

isPending.value

isInitialLoadDone

In the meta of the route you can set the disableLoader to true when no axios call need to be made. If an axios is made on the page, the disableLoader must be set to false The initialLoad done is used for showing a page loader at the first time each page is visited and an axios call has to be made AND when above conditions are met.

After each navigation when the disableLoader variable is set to false, then the initialLoadDone state is set to false to show the page loader.

// routes.js
if (to.meta.disableLoader === undefined || to.meta.disableLoader === false) axiosWrapper().isInitialLoadDone.value = false

::: tip Be also sure to import the pageLoader!! :::

import pageLoader from '~page-loader/pageLoader'
import axiosWrapper from '~axios-wrapper/axiosWrapper'

export default defineComponent({
	name      : '',
	setup     : () => {
		const {} = pageLoader()
		const { isInitialLoadDone } = axiosWrapper()
	}
})

axiosGet

• url is a string
• params is an object --> { id: 25, name: 'Jan' }
• data is an object --> { data: options}
• msg is a string as a message you would like to show on success callback

axiosGet(url, { params }).then(res => {
    console.log(res)
})

axiosPost

axiosPost(url, { data }, msg).then(res => {
    console.log(res)
})

axiosPut

axiosPut(url, { data }, msg).then(res => {
    console.log(res)
})

axiosDelete

axiosDelete(url, { data }, msg).then(res => {
    console.log(res)
})

How update packages?

4 Safe Steps to Update npm Packages

Cheat Sheet: 6 Commands To Help You Update npm Packages

This cheat sheet will make it easy to safely update npm packages in your node application. It includes a list of commands that will help you keep up with the latest updates and avoid breaking changes.

• Use npm list --depth 0 to list all the packages in your package directory
• Use npm audit to find out which of your npm dependencies are vulnerable.
• Use npm outdated to list the packages that are out of date with respect to what is installed in package.json
• Use npm update package_name to update an individual package that has already been installed.
• Use npm uninstall package_name and npm install package_name@version to revert to a specific version.
• Use npm cache clean --force to clear npm's cache of all the packages that have been installed.