Axios transformer/interceptor that converts snake_case/camelCase
- Converts outgoing
data
params
object keys into snake_case - Converts incoming
data
object keys into camelCase - Converts outgoing
headers
object keys into Header-Case - Converts incoming
headers
object keys into camelCase
npm install axios-case-converter
<script src="https://unpkg.com/axios-case-converter@latest/dist/axios-case-converter.min.js"></script>
It is strongly recommended that you replace latest
with a fixed version.
You can fully use camelCase in your JavaScript codes.
import applyCaseMiddleware from 'axios-case-converter';
import axios from 'axios';
(async () => {
const client = applyCaseMiddleware(axios.create());
const { data } = await client.post(
'https://example.com/api/endpoint',
{
targetId: 1
},
{
params: { userId: 1 },
headers: { userAgent: 'Mozilla' }
}
);
console.log(data.actionResult.users[0].screenName);
})();
const client = applyCaseMiddleware(axios.create(), options);
Disable transformation when the string matched or satisfied the condition.
const options = {
preservedKeys: ['preserve_this_key_1', 'preserve_this_key_2']
};
const options = {
preservedKeys: (input) => {
return ['preserve_this_key_1', 'preserve_this_key_2'].includes(input);
}
};
Disable HTTP headers transformation.
const options = {
ignoreHeaders: true
};
Override built-in change-case
functions.
const options = {
caseFunctions: {
camel: (input, options) => {
return (input.charAt(0).toLowerCase() + input.slice(1)).replace(/[-_](.)/g, (match, group1) => group1.toUpperCase());
}
}
};
By default, { stripRegexp: /[^A-Z0-9[\]]+/gi }
is used as default change-case
function options.
This preserves []
chars in object keys.
If you wish keeping original change-case
behavior, override the options.
const options = {
caseOptions: {
stripRegexp: /[^A-Z0-9]+/gi
}
};
caseMiddleware
: { requestTransformer?: Function, responseTransformer?: Function, requestInterceptor?: Function }
Totally override axios-case-converter
behaviors.
const options = {
caseMiddleware: {
requestInterceptor: (config) => {
// Disable query string transformation
return config;
}
}
};
If you use FormData
on Internet Explorer or Safari, you need polyfill of FormData.prototype.entries()
.
If you use FormData
on React Native, please ignore the following warnings after confirming that polyfill is impossible.
// RN >= 0.52
import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings([
'Be careful that FormData cannot be transformed on React Native.'
]);
// RN < 0.52
console.ignoredYellowBox = [
'Be careful that FormData cannot be transformed on React Native.'
];
If you use React Native for Android development, you should use Symbol polyfill from core-js
to avoid bugs with iterators:
- Create
polyfill.js
in root directory with code:
global.Symbol = require('core-js/es6/symbol');
require('core-js/fn/symbol/iterator');
- Include
polyfill.js
in entry point of your app (e.g.app.js
):
import { Platform } from 'react-native';
// ...
if (Platform.OS === 'android') {
require('./polyfill.js');
}