Kelin2025

import Apicase from 'apicase'

const headers = { 'Content-Type': 'multipart/form-data' }

const catalog = {
  url: 'catalog',
  services: [
    { name: 'category',       url: 'categories',     method: 'get' },
    { name: 'platform',       url: 'platforms',      method: 'get' },
    { name: 'apps',           url: 'apps',           method: 'get' },

Kelin2025

/**
 * Array.find
 */
if (!Array.prototype.find) {
    Array.prototype.find = function(predicate) {
        'use strict';
        if (this === null) {
            throw new TypeError('Array.prototype.find called on null or undefined');
        }
        if (typeof predicate !== 'function') {

Kelin2025

import { Container, ApiAbort } from 'apicase'

// I separated it for better understanding
import services from './services'

// Pass authorization token to every service
const headers = () => ({
  token: localStorage.getItem('token')
})

Kelin2025

import { Container } from 'apicase'

export default new Container({
  services: {
    posts: {
      url: '/posts',
      // You can use it for shortcuts
      // or more interesting computed properties
      mixins: {
        success () {

Kelin2025

import apis from './container.js'

// Note that it always resolves
let res = await apis.go(serviceName, queryData, params)

// You can handle result as before
// But you often do not have to do it 
// because of next features I'll talk about
if (res.ok) {
  console.log('Success')

Kelin2025

import { Container } from 'apicase'

export default new Container({
  services: {
    hello: {
      url: '/hello',
      watchers: [
        (ctx, key, value) => {
          switch (key) {
            case 'calls':

Kelin2025

import { Container, ApiAbort } from 'apicase'

// For example, we have user info and validation schema for data
import user from './user'
import schema from './schema'

// For example we have route that create a new product
// And we have to sent title of product

const services = {

Kelin2025

import axios from './axios-custom'

export const foo = () => axios.get('/foo/bar/')

export const products = {
  
  get: id => 
    axios.get(`/products/${id}`),
  
  save: (data, id = null) => 

Kelin2025

/* Example of boilerplate api call */
let res = await get('/posts')
if (res.success) {
  /* 
     Place data somewhere, success alert etc.
     I really feel sorry for people
     who still writes so in every call
     just copy-paste and don't worry about
     And I pretty sure that most of you will say
     "Wtf do you talk? There is no another way"

Kelin2025

<template>
  <form @submit.prevent="$form('testForm').submit('hello')">
    <h2> Vuelidate-forms + Vue-Apicase demo</h2>
    <label> My name is </label>
    <input
      type="text"
      v-model="test.name"
      @input="$v.test.name.$touch"
      :class="{ invalid: $v.test.name.$invalid && $v.test.name.$dirty }"
      placeholder="Enter your name"