Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/anubhavsrivastava/axios-data-unpacker
Axios interceptor that unpacks HTTP responses so that you can focus on actual server data
https://github.com/anubhavsrivastava/axios-data-unpacker
axios axios-ecosystem axios-instance axios-middleware axios-plugin axios-restful middleware
Last synced: 3 months ago
JSON representation
Axios interceptor that unpacks HTTP responses so that you can focus on actual server data
- Host: GitHub
- URL: https://github.com/anubhavsrivastava/axios-data-unpacker
- Owner: anubhavsrivastava
- License: mit
- Created: 2019-03-31T17:25:29.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T18:51:34.000Z (almost 2 years ago)
- Last Synced: 2024-07-02T14:57:52.260Z (4 months ago)
- Topics: axios, axios-ecosystem, axios-instance, axios-middleware, axios-plugin, axios-restful, middleware
- Language: JavaScript
- Homepage:
- Size: 1.57 MB
- Stars: 12
- Watchers: 3
- Forks: 1
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Axios Data Unpacker
Axios middleware/interceptor that unpacks HTTP responses so that you can focus on actual response
[](https://travis-ci.org/anubhavsrivastava/axios-data-unpacker)
[](https://coveralls.io/github/anubhavsrivastava/axios-data-unpacker?branch=master)
[](http://makeapullrequest.com)
[](https://github.com/anubhavsrivastava/axios-data-unpacker/issues)
[](http://hits.dwyl.io/anubhavsrivastava/axios-data-unpacker)
[](https://nodei.co/npm/axios-data-unpacker/)
- [Introduction](#introduction)
- [The Problem](#the-problem)
- [Solution](#solution)
- [Install](#install)
- [Usage](#usage)
- [Configuration](#configuration)
- [Contribution](#contribution)
- [License](#license)
---
## 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](https://www.npmjs.com/package/axios#request-method-aliases).
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](CONTRIBUTING.md) to get started.
---
## License
[](LICENSE)
refer `LICENSE` file in this repository.
---