axios-case-converter
Axios transformer/interceptor that converts _snake_case/camelCase_
- Converts outgoing
dataparamsobject keys into _snake_case_ - Converts incoming
dataobject keys into _camelCase_ - Converts outgoing
headersobject keys into _Header-Case_ - Converts incoming
headersobject 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
[!NOTE]
> Since v2.0.0 this package is ESM-only and requires Node.js >= 18.
Useimport(norequire()). If you still need CommonJS or older Node.js,
stay on the 1.x line.
CDN
<script type="module">
import applyCaseMiddleware from 'https://esm.sh/axios-case-converter';
</script>It is strongly recommended that you replace the unversioned URL 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
[!NOTE]
> Since v2.0.0 the package ships an ES2021 ESM build. Legacy targets such
as Internet Explorer cannot execute it directly — you must transpile it (and
its dependencies) through your bundler first. The compatibility notes below
apply _after_ such transpilation.
[!WARNING]
> ### Object compatibility
> If you run on Internet Explorer, you need polyfill for Object.prototype.entries().
> - zloirock/core-js: Standard Library
[!WARNING]
> ### FormData compatibility
> If you useFormDataon Internet Explorer, you need polyfill ofFormData.prototype.entries().
> - jimmywarting/FormData: HTML5 FormData polyfill for Browsers.
> If you use FormData on React Native, please ignore the following warnings after confirming that polyfill is impossible.
>> 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.', > ]; >> // RN >= 0.52
[!WARNING]
> ### Symbol compatibility
> If you use React Native for Android development, you should use Symbol polyfill from core-js to avoid bugs with iterators:
> 1. Create polyfill.js in root directory with code:
>> require('core-js/fn/symbol/iterator'); >> global.Symbol = require('core-js/es6/symbol');
> 2. Includepolyfill.jsin entry point of your app (e.g.app.js):
>> > // ... > > if (Platform.OS === 'android') { > require('./polyfill.js'); > } >> import { Platform } from 'react-native';
> cf. [undefined is not a function(evaluating '_iterator\[typeof Symbol === "function"?Symbol.iterator:"@@iterator"\]()') · Issue #15902 · facebook/react-native](https://github.com/facebook/react-native/issues/15902)