alova-vue-haunv

Alova HTTP client wrapper for Vue 3 — automatically binds apiGet / apiPost / apiPut / apiDelete to the global scope.

Works on Browser, Linux, macOS, and Windows. Compatible with both Vue CLI (webpack) and Vite.

Installation

npm install alova-vue-haunv alova

Setup

Call once in main.js — that's all you need:

// Vue CLI (CommonJS)
require('alova-vue-haunv')({ baseURL: '/api' });

// Vite / ESM
import setup from 'alova-vue-haunv';
setup({ baseURL: '/api' });

After this line, apiGet / apiPost / apiPut / apiDelete are available globally — no import needed in any component.

Usage in components — no import required

<script>
export default {
  data() {
    return {
      users: [],
      loading: false,
    };
  },
  methods: {
    async fetchUsers() {
      this.loading = true;
      try {
        this.users = await apiGet('/users');
      } finally {
        this.loading = false;
      }
    },
    async createUser(payload) {
      return await apiPost('/users', payload);
    },
    async updateUser(id, payload) {
      return await apiPut(`/users/${id}`, payload);
    },
    async deleteUser(id) {
      return await apiDelete(`/users/${id}`);
    },
  },
  mounted() {
    this.fetchUsers();
  },
};
</script>

Query params

// GET /users?page=1&limit=10
await apiGet('/users', { page: 1, limit: 10 });

// POST /users?role=admin (body + query params)
await apiPost('/users', { name: 'haunv' }, { role: 'admin' });

Authorization

Pass a getToken function — it is called on every request so it always picks up the latest token. Equivalent to axios.defaults.headers.common['Authorization'].

// Vue CLI
require('alova-vue-haunv')({
  baseURL: '/api',
  getToken: () => localStorage.getItem('token'),
});

// Vite / ESM
import setup from 'alova-vue-haunv';
setup({
  baseURL: '/api',
  getToken: () => localStorage.getItem('token'),
});

Use a custom prefix (default is Bearer):

setup({
  baseURL: '/api',
  getToken: () => localStorage.getItem('token'),
  tokenPrefix: 'Token',
});

APIs that don't require authentication work normally — just don't pass getToken, or return null / empty string from it and the Authorization header will be omitted automatically.

Custom configuration

require('alova-vue-haunv')({
  baseURL: 'https://api.example.com',
  getToken: () => localStorage.getItem('token'),

  // Unwrap a custom API envelope, e.g. { code, data, message }
  onSuccess: async (response) => {
    const json = await response.json();
    if (json.code !== 200) {
      return Promise.reject(new Error(json.message));
    }
    return json.data;
  },

  onError: (error) => {
    console.error('Request failed:', error);
    return Promise.reject(error);
  },
});

Options

| Option | Type | Default | Description | |----------------|------------|------------|----------------------------------------------------------------| | baseURL | string | '' | Base URL prepended to all requests | | getToken | Function | null | Returns the auth token string — called on every request | | tokenPrefix | string | 'Bearer' | Prefix for the Authorization header | | onSuccess | Function | — | Receives Response, must return parsed data | | onError | Function | — | Receives error, handle or re-throw |

License

MIT © haunv