vue-composable

# Axios

The axios (opens new window).

Provides a wrapper to use axios (opens new window).

# Installing

# install with yarn
yarn add @vue-composable/axios

# install with npm
npm install @vue-composable/axios

# Parameters

import { useAxios } from "@vue-composable/axios";

useAxios(url?, opts?, throwException?);
useAxios(url, opts?);
useAxios(url, throwException?);
useAxios(opts, throwException?);
useAxios(throwException);
Parameters Type Required Default Description
url String false undefined Makes a request at creation
opts AxiosRequestConfig false undefined Arguments for axios.client
throwException Boolean false false Makes exec throw exceptions, when false the error will be handled only by the usePromise

NOTE: if url or config.url is provided the request will be made when calling useAxios

# State

The useAxios function exposes the following reactive state:

import { useAxios } from "@vue-composable/axios";

const {
  client,
  data,
  status,
  statusText,

  // cancel
  isCancelled,
  cancelledMessage,

  // promise
  promise,
  result,
  loading,
  error
} = useAxios();
State Type Description
client AxiosClient Axios client used
data any Axios response.data
status Number Axios response.status
statusText String Axios response.statusText
isCancelled Boolean If the request has been cancelled by the user (executing cancel())
cancelledMessage String Message provided when cancelling the request
promise Promise Current promise
result any Resolved value
loading boolean Waiting for the promise to be resolved
error any Promise error

# Methods

The useAxios function exposes the following methods:

import { useAxios } from "@vue-composable/axios";

const { exec, cancel } = useAxios();
Signature Description
exec(AxiosRequest|string) Executes axios request
cancel(message?) Cancels the last request

TIP

You can pass throwException on the last argument of the exec to override the default behaviour

# Example

current Id 1

Status:

# Code

<template>
  <div>
    <p>current Id {{ id }}</p>
    <p>
      <button @click="id--">prev</button>
      <button @click="id++">next</button>
    </p>
    <p v-if="loading">loading...</p>
    <div v-else>
      <p>Status: {{ status }}</p>
      {{ data }}
    </div>
  </div>
</template>

<script>
import { ref, watch } from "@vue/composition-api";
import { useAxios } from "@vue-composable/axios";

export default {
  name: "axios-example",
  setup() {
    const id = ref(1);
    const { data, loading, exec, error, status } = useAxios();

    watch(id, id => {
      exec({
        method: "GET",
        url: "https://reqres.in/api/user/" + id
      });
    });

    return {
      id,
      data,
      loading,
      status
    };
  }
};
</script>

← makeAxios →