+

vue-axios

A small wrapper library for the simple promise based HTTP client axios.

The library is made for Vue 3.x.x and the Composition API.

Instalation

Install the library and axios with npm.

1npm install axios @baloise/vue-axios

Use plugin

Import the library into your src/main.ts file or any other entry point.

1import { createApp } from 'vue'
2import { vueAxios } from '@baloise/vue-axios'

Apply the library to the vue app instance. The additional configuration have the type AxiosRequestConfig.

1const app = createApp(App)
2
3// simple
4app.use(vueAxios)
5
6// additional configurations
7app.use(vueAxios, {
8  baseURL: 'http://api.my-site.com',
9})

Interceptors

Use the defined $axios instance. More to the intercepters can be found here.

1import { $axios } from '@baloise/vue-axios'
2
3// Add a request interceptor
4$axios.interceptors.request.use(
5  function (config) {
6    // Do something before request is sent
7    return config
8  },
9  function (error) {
10    // Do something with request error
11    return Promise.reject(error)
12  },
13)
14
15// Add a response interceptor
16$axios.interceptors.response.use(
17  function (response) {
18    // Any status code that lie within the range of 2xx cause this function to trigger
19    // Do something with response data
20    return response
21  },
22  function (error) {
23    // Any status codes that falls outside the range of 2xx cause this function to trigger
24    // Do something with response error
25    return Promise.reject(error)
26  },
27)

Usage

Have multiple API's

To access multiple apis in your app it could be help full to create a new axios instance. However, if you only access one api configure it through the plugin options defaults.

Export the new instance and use it in any component.

1import { $axios } from '@baloise/vue-axios'
2
3export const catApi = $axios.create({
4  baseURL: 'https://cat-fact.herokuapp.com',
5})
6
7export const dogApi = $axios.create({
8  baseURL: 'https://dog-fact.herokuapp.com',
9})

Use the defined api instance in your components with the same interface that axios has.

Axios API Reference

1catApi.get('/facts')
2
3dogApi.post('/facts', {
4  fact: 'wuff',
5})

Composition API

To use axios with the composition API import the useAxios composable function. useAxios return reactive values like isLoading or functions like request to execute a HTTP request.

The reactive values gets updated when executing a HTTP request.

1import { computed, defineComponent } from 'vue'
2import { useAxios } from '@baloise/vue-axios'
3import { CatApi } from '../api/cat.api'
4
5type CatFacts = { text: string }[]
6
7export default defineComponent({
8  setup() {
9    const { get, data, isLoading, isSuccessful } = useAxios<CatFacts, undefined>(CatApi)
10
11    function callApi() {
12      get('/facts')
13    }
14
15    return {
16      callApi,
17      data,
18      isLoading,
19      isSuccessful,
20    }
21  },
22})

useAxios

The useAxios function accepts a custom axios instance, otherwise it uses the global $axios instance. The $axios instance is defined in the plugin options with the default config.

1import { useAxios } from '@baloise/vue-axios'
2
3useAxios()
4useAxios(axiosInstance)

Reactive State

The useAxios function exposes the following reactive state.

1import { useAxios } from '@baloise/vue-axios'
2
3const {
4  data,
5  error,
6  headers,
7  status,
8  statusText,
9  abortMessage,
10
11  // state
12  isFinished,
13  isLoading,
14  isSuccessful,
15  hasFailed,
16  aborted,
17} = useAxios()

State	Type	Description
data	any	data is the response that was provided by the server.
error	any	Promise Error.
headers	any	headers the HTTP headers that the server responded with.
status	number	status is the HTTP status code from the server response.
statusText	string	statusText is the HTTP status message from the server response.
abortMessage	string	abortMessage is the provided message of the abort action.
isFinished	boolean	If true the response of the http call is finished.
isLoading	boolean	If true the response of the http call is still pending.
isSuccessful	boolean	If true the response successfully arrived.
hasFailed	boolean	If true the response has failed.
aborted	boolean	If true the request has been aborted by the user.

Functions

The useAxios function exposes the following functions.

1import { useAxios } from '@baloise/vue-axios'
2
3const { request, get, post, put, patch, remove, head, options, abort } = useAxios()

request

Similar to the axios.request function. Moreover, besides the AxiosRequestConfig it also accepts Promise<RequestArgs> paramter too. Promise<RequestArgs> is the return type of the OpenAPI Codegen ParamCreator.

1request(config: AxiosRequestConfig)
2request(config: Promise<RequestArgs>)

get, post, put, patch, head, options, remove

Similar to the axios functions.

1get(url[, config])
2remove(url[, config])
3head(url[, config])
4options(url[, config])
5post(url[, data[, config]])
6put(url[, data[, config]])
7patch(url[, data[, config]])

abort

aborts the HTTP request.

1abort()
2abort(message: string)

Open API Codegen

If your API uses Swagger and follows the OpenApi guidlines it is possible to generate a typescript axios SDK out of it.

To generate a SDK install the OpenAPI Generator

1npm add -D @openapitools/openapi-generator-cli

Export the swagger.json or swagger.yaml from your API and run the following command.

1openapi-generator-cli generate -i path-to/swagger.yaml -g typescript-axios -o generated-sources/openapi --additional-properties=supportsES6=true,npmVersion=6.9.0,withInterfaces=true

Move the generated SDK code into your project. Then define the base configuration of your API and for each endpoint create the param creator.

Have a look into our awesome @baloise/vue-keycloak library.

1import { Configuration, UsersApiAxiosParamCreator } from './generated'
2import { getToken } from '@baloise/vue-keycloak'
3
4const myApiConfiguration = new Configuration({
5  basePath: '/my/api',
6  apiKey: async () => {
7    const token = await getToken()
8    return `Bearer ${token}`
9  },
10})
11
12export const UsersApi = UsersApiAxiosParamCreator(myApiConfiguration)

Import the param creator UsersApi into the component and use them with the function request to send the HTTP request to the defined API.

1import { defineComponent, ref } from 'vue'
2import { UsersApi } from '../api/my.api'
3import { useAxios } from '@baloise/vue-axios'
4
5export default defineComponent({
6  setup() {
7    const { request } = useAxios()
8
9    async function onButtonClick() {
10      await request(UsersApi.getUserUsingGET('7'))
11    }
12
13    return { onButtonClick }
14  },
15})

License

Apache-2.0 Licensed | Copyright © 2021-present Gery Hirschfeld & Contributors