axios-case-converter
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
Installing
NPM
npm install axios-case-converter
[!IMPORTANT]
Axios is a peer dependency of axios-case-converter and must be installed separately.
npm install axios
CDN
<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.
Usage
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);
})();
Options
const client = applyCaseMiddleware(axios.create(), options);
preservedKeys
: string[] | Function
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);
}
};
ignoreHeaders
: boolean
Disable HTTP headers transformation.
const options = {
ignoreHeaders: true
};
ignoreParams
: boolean
Disable HTTP URL parameters transformation.
const options = {
ignoreParams: true
};
caseFunctions
: { snake?: Function, camel?: Function, header?: Function }
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());
}
}
};
caseOptions
: { stripRegexp?: RegExp }
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;
}
}
};
Check the tests for more info
Attention
[!WARNING]
Object
compatibilityIf you run on Internet Explorer, you need polyfill for
Object.prorotypte.entries()
.
[!WARNING]
FormData
compatibilityIf you use
FormData
on Internet Explorer, you need polyfill ofFormData.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.' ];
[!WARNING]
Symbol
compatibilityIf 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'); }