
Laraxios - Axios wrapper for Laravel API
This wrapper makes it simple to integrate Axios with the Laravel API, Sanctum, and Fortify (coming soon).
Installation
yarn add axios laraxios
# or
npm i axios laraxios
Usage
import axios from 'axios'
import laraxios from 'laraxios'
const api = laraxios(axios, {
baseURL: 'https://api.example.com/v1'
})
await api.get('url', { config })
await api.post('url', { data }, { config })
await api.put('url', { data }, { config })
await api.patch('url', { data }, { config })
await api.delete('url', { config })
URL parameter
Keep in mind that there is a difference between URLs with and without a leading slash. If you add a slash, the baseURL will change to the path's root. This is useful for endpoints outside the scope of the API.
For instance, if you set baseURL
to https://example.com/api/v1
, the final URLs may appear as follows:
api.get('products/tags')
api.get('/products/tags')
Method Spoofing
By default, Laraxios will convert put
, patch
and delete
methods automatically to the post
method and
the _method: put/patch
property
will be added to the data property.
Payload data conversion
To put your mind at ease, Laraxios will convert your objects, arrays, and booleans to a format that is supported by the PHP server. On the other hand, File and Blob will be sent normally.
await api.put('product', {
title: 'Lorem ipsum',
published: true,
price: {
actual: 199,
discounted: 99
},
tags: ['foo', 'bar']
})
Final payload:
{
"_method": "put",
"title": "Lorem ipsum",
"published": "1",
"price[actual]": "199",
"price[discounted]": "99",
"tags[0]": "foo",
"tags[1]": "bar"
}
Axios Instance
Laraxios will create an axios instance by using this setup out of the box, but you can override them if you need to:
{
withCredentials: true,
headers: {
Accept: 'application/json'
}
}
Here's how you can get to it:
api.axiosInstance
Make use of it if you need to do anything like setup interceptors.
Request Config
You can use any regular axios request config, and there is an extra
configuration option called errorHandler that lets you add your own function to handle errors
that Laravel responses cause.
Sanctum
If you are using Laravel Sanctum, this option can be helpful to send initial request to get csrf token.
api.sanctum.csrf()
If the URL is different, you can set your own:
api.sanctum.csrf('https://example.com/my/csrf/token')
Handling API errors
All Laravel response errors can be handled by setting the function for the errorHandler configuration option that
accepts the error property from the response.
Example of how you can handle the API errors:
const myErrorHandler = (error) => {
const { status, statusText, data } = error.response
switch (status) {
case 419:
case 401:
logoutAndRedirectUser()
break
case 429:
case 400:
case 403:
case 404:
displayNotification(status + ' ' + statusText)
break
case 422:
displayValidationMessage(data.message)
break
case 503:
displayMaintenanceMessage()
break
default:
console.error('Something went wrong...')
}
}
const api = laraxios(axios, {
baseURL: 'https://api.example.com/v1',
errorHandler: myErrorHandler
})