Skip to content

Axios interceptor that unpacks HTTP responses so that you can focus on actual server data

License

Notifications You must be signed in to change notification settings

anubhavsrivastava/axios-data-unpacker

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

78 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Axios Data Unpacker

Axios middleware/interceptor that unpacks HTTP responses so that you can focus on actual response

Build Status Coverage Status PRs Welcome GitHub issues HitCount

NPM


Introduction

Axios data unpacker is interceptor for axios that unpacks data from axios standard response and makes API response content to be called so that one can focus on actual response.

The Problem

Any HTTP request using axios will return into following object that is available to callee function,

{
    // `data` is the response that was provided by the server
    data: {},

    // `status` is the HTTP status code from the server response
    status: 200,

    // `statusText` is the HTTP status message from the server response
    statusText: 'OK',

    // `headers` the headers that the server responded with
    headers: {},

    // `config` is the config that was provided to `axios` for the request
    config: {}
}

This would imply that application has to unpack data object at all places of consumption something like,

getUsers() {
    return axios.get('/users').then( function (result) {
        return result.data;
    });
}

or something like,

getUsers() {
    return axios.get('/users').then(result => result.data);
}

Solution

The above consumption code changes with this module. The above code or all places of consumption would change as below.

getUsers() {
    return axios.get('/users');
}

Install

$ npm install axios-data-unpacker --save

or

yarn add axios-data-unpacker

Usage

Important : This should be last interceptor to be added as response interceptor for your axios instance. This is important because any other response interceptor in chain may use values from complete axios response, like status or headers.

  • Simple usage

    import axios from 'axios';
    import {axiosResponseDataUnpacker} from 'axios-data-unpacker';
    
    // after adding other response interceptors
    axiosResponseDataUnpacker(axios)
    

    axiosResponseDataUnpacker function also accepts instance of axios as its parameter.

  • Default Instance

    import axios from 'axios';
    import axiosDataUnpacker from 'axios-data-unpacker';
    ... //other chain of interceptors and config
    axios.interceptors.response.use(axiosDataUnpacker);
    
  • At instance level

    import axiosDataUnpacker from 'axios-data-unpacker';
    const instance = axios.create();
    ... //other chain of interceptors and config
    instance.interceptors.response.use(axiosDataUnpacker);
    

Configuration

One can disable this interceptor by passing packResponseData as configuration in axios instance or per axios api call. This configuration can also be set on axios.default object.

Setting Name type description default value
packResponseData Boolean Flag to disable data unpacking false
  1. To disable unpacking for specific call (in case API layer needs to work with header, status, config from standard axios response)

     axios.get('/users', { packResponseData;:true } ).then(response=>{
         //response is standard axios response with config, header, status, data, statusText
         response.header('csrf') // sample usage of non-data fields
     })
    

    This config as parameter is available for all calls(get, post, put, etc) in axios, refer here.

  2. To disable interceptor for all calls of a instance (if already configured as interceptor in axios default configuration)

    const instance = axios.create({packResponseData: true});
    ... //other chain of interceptors and config
    instance.interceptors.response.use(axiosDataUnpacker);
    

Contribution

Suggestions and PRs are welcome!

Please read the contribution guidelines to get started.


License

Open Source Love

refer LICENSE file in this repository.