Appearance
Axios
StarterStack uses the Axios library to handle all HTTP requests.
Overview
All Axios
configuration and setup is handled in /frontend/axios/index.js
following the standard Axios docs.
A Few Behviors
StarterStack configures Axios to intercept all HTTP requests
and do the following:
- start the
NProgress
progress bar to indicate a request is loading
StarterStack configures Axios to intercept all HTTP responses
and do the following:
- stop the
NProgress
progress bar to indicate a request is complete and a repsonse has been received. - examine the HTTP repsonse code. If a HTTP 401 Unauthorized is received, the application redirects to the login route
API Handlers
There are 3 API handlers bundled in with StarterStack to connect to the /backend
:
- Auth - handles all authentication related services
- User - handles all user related services
- Stripe - handles all Stripe related services
Adding a New API Handler
As you built out your application, you will no doubt have to add more api routes to the backend or to 3rd parties.
The process consists of 2 steps:
1. Create an API handler file
Review /frontend/axios/auth.js
for an example of how to create an API handler.
2. Confgure Axios to Use Your API Handler
Add your API handler to the Axios configuration in /frontend/axios/index.js
Locate the other API handlers at the top of the index.js
js
import auth from '@/axios/auth.js'
import user from '@/axios/user.js'
import stripe from '@/axios/stripe.js'
import myAPIHander from '@axios/my-api-handler.js' // <-- add yours here
Next, locate the section that adds the handler to axios:
js
/**
* extend instance with our api endpoints
*/
_axios.api = {
Auth: auth(_axios),
User: user(_axios),
Stripe: stripe(_axios),
MyAPIHander: myAPIHander(_axios) // <-- add yours here
}
Using your API in Code
js
const response = await axios.api.MyAPIHander.someFunc(data)