Use Apicase

[zmts]

Use Apicase

[zmts]

@Kelin2025 Tnx for suggestion. I will check your way.

[zmts]

At first this boilerplate created for maximum transparent example how to structure vue.js projects.
Axios fortunately is great, well known and tested many users library. I think Axios doing a great job in my case.

I took a look at your services section. To be honest, it looks awful.

I wholly disagreed with yours opinion. Work with API in this project based on ES6 classes, and very flexible to next extension. Each api call can be modified to each case and encapsulated to one convenient interface. Using pure axios inside components, yes it really awful, but not as class based services.

you don't need to write tons of boilerplate code.

Unfortunately, we're not going anywhere.

And yes i will look at Apicase more closely when I have time.

[Kelin2025]

No-no-no-no-no, you didn't understand why I called it awful.

Using pure axios inside components, yes it really awful, but not as class based services.

I meant just this :)
If you want to use just requests, of course, there are no difference between Apicase and axios

• Apicase: click
• Axios: click

BUT! Axios doesn't have flexible and scalable services. That's why you have services/auth.js with a hand-made classes and tons of boilerplate.

Simple example of auth service:

/* Auth service */
const AuthService = new ApiService({
  url: '/api/auth',
  method: 'POST'
})

/* Save token on success auth */
AuthService.on('done', result => { 
  localStorage.setItem('token', result.body.token) 
})

/* Calling service */
AuthService.doRequest({
  body: { login: 'Hello', password: 'foobar' }
})

Example of services that depends on auth

/* Root services with auth check */
const Root = new ApiService(fetch, {
  url: '/api',
  hooks: {
    /* 
      Check for auth and inject auth token. 
      If it fails, abort request with 401 error 
    */
    before ({ payload, meta, next }) {
      const token = localStorage.getItem("token")
      if (!token) {
        if (meta.requiresAuth) {
          fail({ status: 401 })
        } else {
          next(payload)
        }
      } else {
        payload.headers = { ...payload.headers, Authorization: token }
        next(payload)
      }
    }
  }
})

/* Just array of services that will inherit Root hook and url */
const API = new ApiTree(Root, [
  { 
    name: 'getPosts', 
    url: 'posts' 
  },
  { 
    name: 'changeProfile', 
    url: 'profile/edit', 
    meta: { requiresAuth: true } 
  }
])

And there are a lot of features which I can't explain in a single message. Just try it ;)

[zmts]

I'll try it! Tnx