npm package: @isense-development/axios-wrapper
Description: axios-wrapper package
Author: Hemelaers Jan
Latest version: 2.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                            |
|:-----------------------------|:--------------------------------------|
| ![Quasar v2.x][quasar_2_x] | ![@isense-development/axios-wrapper v2.x][@isense-development/axios-wrapper_2_x]     |

[quasar_2_x]:  https://img.shields.io/badge/version-2.x-blue

[@isense-development/axios-wrapper_2_x]:   https://img.shields.io/badge/version-2.x-blue

## 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

```js
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.

```js
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.
```js
// routes.js
if (to.meta.disableLoader === undefined || to.meta.disableLoader === false) axiosWrapper().isInitialLoadDone.value = false
```

::: tip
Be also sure to import the pageLoader!!
:::

```js
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

```js
axiosGet(url, { params }).then(res => {
    console.log(res)
})
```

### axiosPost

```js
axiosPost(url, { data }, msg).then(res => {
    console.log(res)
})
```

### axiosPut

```js
axiosPut(url, { data }, msg).then(res => {
    console.log(res)
})
```

### axiosDelete

```js
axiosDelete(url, { data }, msg).then(res => {
    console.log(res)
})
```

## How update packages?

[4 Safe Steps to Update npm Packages](https://josipmisko.com/posts/how-to-update-npm-packages-in-4-easy-steps)

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.