axios-case-converter

Axios transformer/interceptor that converts snake_case/camelCase

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
axios-case-converter
15631.1.14 months ago7 years agoMinified + gzip package size for axios-case-converter in KB

Readme

axios-case-converter
npm version Build Status Coverage Status
Axios transformer/interceptor that converts snakecase/camelCase
  • Converts outgoing data params object keys into snakecase
  • 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 compatibility

    If you run on Internet Explorer, you need polyfill for Object.prorotypte.entries().

    !WARNING

    FormData compatibility

    If you use FormData on Internet Explorer, 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.'
    ];

    !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:

    global.Symbol = require('core-js/es6/symbol');
    require('core-js/fn/symbol/iterator');

    1. 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');
    }

    cf. undefined is not a function(evaluating 'iterator\[typeof Symbol === "function"?Symbol.iterator:"@@iterator"\]()') · Issue #15902 · facebook/react-native