Install

// [createInstance] used to create a request instance.
// The parameters are separated into [axios configs] and [request options]
// The first parameter is the [axios config] which is used to configure the global axios features same as axios.create()
const request = createInstance({
withCredentials: true,
headers: {
Accept: 'application/json',
'X-Requested-With': 'XMLHttpRequest',
},
});

// The second parameter is the [request options] which is used to configure the global request features.
const request = createInstance(
{
// Some kinds of the response should be defined as error even it's network response code is between 200 and 300. [isSuccess] is the certain parameter to defined the response pattern.
// e.g. Only response which data.code equal to '200000' or '200100' could be treated as successful.
isSuccess: data => {
const { code } = data;
return ['200000', '200100'].includes(code);
},
},
{
// The callback function on a success response.
// Usually used to display a success message with a UI framework.
onSuccess: data => {
const { message } = data;
Message.success(message);
},
// The callback function on a error response.
// Status between 200 and 300 will also involved if this response is defined as error by [isSuccess].
onFail: (data, status, config) => {
if (status === 401) {
// handle different kinds of network return code.
} else if (status >= 200 && status < 300) {
} else {
}
},
},
);

// The [axios configs] and [request options] both could be overrided in request instance
const response = await request(
{
url: '/api/v1',
method: 'POST',
data: { a: 1, b: 2 },
},
{
onSuccess: data => {
const { message } = data;
AnotherMessage.success(message);
}
},
);

// extraData is same as axios.data
const request = createInstance({});
const request = await request(
{
url: '/api/v1',
method: 'POST',
},
{
extraData: { c: 1, d: 2 },
},
);

// axios.data has higher priority than extraData.
// { a: 1, b: 2 } will be sended.
const request = createInstance({});
const request = await request(
{
url: '/api/v1',
method: 'POST',
data: { a: 1, b: 2 },
},
{
extraData: { c: 1, d: 2 },
},
);