@dmtkpv/api

Composition-based HTTP client for Vue

npm install @dmtkpv/api

Endpoints

A (deep) object of methods. Method must return a request config. Hooks serve as an additional option:

• onCancel
• onFetch
• onError
• onSuccess
• onComplete

uncanceled: true prevents request from aborting when api.cancel() called.

Example:

const enpoints = {
    
    auth: {

        login (email, password) {
            return {
                uncanceled: true,
                method: 'POST',
                data: { email, password },
                onSuccess (data) {
                    console.log('login', data)
                }
            }
        }
        
    }    

}

createAPI

Accepts the same options as axios.create() and endpoints

import { createApp } from 'vue'
import { createAPI } from '@dmtkpv/api'
import endpoints from './config/enpoints.js'
import App from './main.vue'

const app = createApp(App);

const api = createAPI({
    baseURL: 'http://example.com',
    endpoints
})

app.use(api);
app.mount('body');

API properties

api.pending

Computed property indicating whether there are pending requests

API methods

api.cancel([key])

api.cancel() - cancels all pending requests
api.cancel('login') - cancels pending requests with key login

Hooks

Hooks can be used on api instance:

api.onFetch(() => {})
api.onFetch('login', () => {})

On endpoint instance:

api('login').onFetch(() => {})

Inside endpoint configuration:

{
    method: 'GET',
    url: '/',
    onFetch () {}
}

Hook callback can return a promise

api.onFetch('login', async () => {
    console.log(endpoint.key) // login
})

Hook returns off function

const off = onSuccess(() => {});
off();

api.onFetch([key], function (endpoint) {})

Executes before the request is sent.

Examples:

api.onFetch(endpoint => {
    endpoint.config.params ??= {}
    endpoint.config.params.language = 'en'
})

api.onFetch('private', async ({ config }) => {
    const token = await api('token').fetch()
    config.headers ??= {}
    config.headers['Authorization'] = `Bearer ${token}`
})

api.onError([key], function (error, endpoint) {})

Example:

api.onError(error => {
    return { ok: true }
})

api.onError(error => {
    throw new Error('')
})

api.onError(error => {
    console.log('error')
})

api.onSuccess([key], function (data, endpoint) {})

api.onComplete([key], function (endpoint) {})

Endpoint

const { 
    data, 
    error,
    pending, 
    promise,
    quiet,
    fetch,
    cancel, 
    onFetch, 
    onError, 
    onSuccess, 
    onComplete,
    onCancel
} = api.endpoint('login');