Skip to content

Instantly share code, notes, and snippets.

@paulsturgess
Last active February 2, 2024 17:24
Star You must be signed in to star a gist
Save paulsturgess/ebfae1d1ac1779f18487d3dee80d1258 to your computer and use it in GitHub Desktop.
An example Service class wrapper for Axios
import axios from 'axios';
class Service {
constructor() {
let service = axios.create({
headers: {csrf: 'token'}
});
service.interceptors.response.use(this.handleSuccess, this.handleError);
this.service = service;
}
handleSuccess(response) {
return response;
}
handleError = (error) => {
switch (error.response.status) {
case 401:
this.redirectTo(document, '/')
break;
case 404:
this.redirectTo(document, '/404')
break;
default:
this.redirectTo(document, '/500')
break;
}
return Promise.reject(error)
}
redirectTo = (document, path) => {
document.location = path
}
get(path, callback) {
return this.service.get(path).then(
(response) => callback(response.status, response.data)
);
}
patch(path, payload, callback) {
return this.service.request({
method: 'PATCH',
url: path,
responseType: 'json',
data: payload
}).then((response) => callback(response.status, response.data));
}
post(path, payload, callback) {
return this.service.request({
method: 'POST',
url: path,
responseType: 'json',
data: payload
}).then((response) => callback(response.status, response.data));
}
}
export default new Service;
@fgblomqvist
Copy link

fgblomqvist commented Oct 25, 2017

error.response is not defined for me, any idea of why that could be? Other properties, such as error.config work fine.
(tested axios 0.16.2 and 0.17.0)

@sarvanios6
Copy link

how to handle cors domain api here?

@itsjeffro
Copy link

itsjeffro commented Jul 3, 2018

@sarvanious cors depends on the server youre making requests to

@kiritm-nimblechapps
Copy link

Can you write how to use it ?

@arunpkumar92
Copy link

Sample usage code needed.

@kiritm-nimblechapps
Copy link

kiritm-nimblechapps commented Jul 8, 2019

@arunpkumar92, Sample code to use. Import and use it.

  Service.get(
            "url"
            params,
            (response) => {
                console.log("****** response is *******", response);
            }
        )

@arunpkumar92
Copy link

@kiritnim Thanks for the help.

@warrenlalata
Copy link

Hi! what about handling auth headers?

@behnamazimi
Copy link

behnamazimi commented Jun 24, 2020

Thank you.
I code a dynamic version for this purpose and packed it under the name js-service-wrapper.
A promise based collective service wrapper with queue support which totally works in browser and/or Node.js environment

@ittroller
Copy link

how to handle call api refresh token with this class ? please send me some example

@Ankit9997
Copy link

serviceWrapper

@champion-054
Copy link

Is it possible to provide a parameterized constructor? And how exactly can we implement it?

@Sovai
Copy link

Sovai commented Jan 29, 2022

why do we need this wrapper service instead of direct axios?

@Darshan072
Copy link

@Sovai just to add all the common config at one place.

@deepaksemwal121
Copy link

@Sovai if any time you need to change the axios for XYZ reasons you don't have to do it manually in all of your requests you can change it in a single file. It will save your time and efforts

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment