https://github.com/starlight36/fetch-http-client
A http client wrapper for fetch api with middleware support.
https://github.com/starlight36/fetch-http-client
asynchronous fetch-api middleware react react-native rest-client
Last synced: 4 months ago
JSON representation
A http client wrapper for fetch api with middleware support.
- Host: GitHub
- URL: https://github.com/starlight36/fetch-http-client
- Owner: starlight36
- License: mit
- Created: 2016-05-06T05:29:11.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2018-01-24T11:34:23.000Z (about 8 years ago)
- Last Synced: 2025-02-01T10:37:57.882Z (about 1 year ago)
- Topics: asynchronous, fetch-api, middleware, react, react-native, rest-client
- Language: JavaScript
- Homepage:
- Size: 23.4 KB
- Stars: 43
- Watchers: 8
- Forks: 7
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Fetch Http Client
[](https://raw.githubusercontent.com/starlight36/fetch-http-client/master/LICENSE) [](https://badge.fury.io/js/fetch-http-client) [](https://travis-ci.org/starlight36/fetch-http-client) [](https://coveralls.io/github/starlight36/fetch-http-client)
A http client wrapper for [Fetch API](https://github.com/whatwg/fetch) with middleware support.
# Introduction
Fetch API is a elegant way to access HTTP resources. I used it in my React/ReactNative project as the default network layer. But it still has some inconvenience to use. For example, every request should carry the access token in HTTP request headers, ervery request error should be logged to console etc.
If Fetch API support middleware, everything can be elegantly fixed. Both [fetch-plus](https://github.com/RickWong/fetch-plus) and [http-client](https://github.com/mjackson/http-client) provided the middleware support, but if you need some asynchronous pre-request opreation, they could not suppport elegantly.
So this project is another choice to use Fetch API with middleware support, it's quite simple and powerful.
# Installation
```shell
npm install fetch-http-client --save
```
# Usage
## Import
```js
import FetchHttpClient, { json } from 'fetch-http-client';
```
## Quick start
```js
// Create a new client object.
const client = new FetchHttpClient('http://api.example.com/endpoint');
// Add access token
client.addMiddleware(request => {
request.options.headers['X-Access-Token'] = 'secret';
});
// Add json support
client.addMiddleware(json());
// Add Logging
client.addMiddleware(request => response => {
console.log(request, response);
});
// Fire request.
client.get('test').then(response => console.log(response.jsonData));
// Path variables support.
client.get('users/{id}', { uriParams: { id: 1 } }).then(response => console.log(response.jsonData));
```
## Asynchronous pre-request middleware
if your access token is stored in a asynchronous storage, it should be fetch before every request, you can use such kind of middleware:
```js
// Add access token asynchronously
client.addMiddleware(request => {
return AsynchronousStorage.fetch('accessToken').then(token => {
request.options.headers['X-Access-Token'] = token;
return request;
});
});
```
That means your middleware could return a `Promise` object and the real request opreate will be issued after the asynchronous method finished.
**NEVER forget returning the request object after you handled the result!**
# API
## FetchHttpClient
```js
new FetchHttpClient(baseUrl:string);
```
### fetch
`fetch` method can been used the same as Fetch API.
```
instance.fetch(uri:string[, options: object])
```
### request
Convenience way to issue a request with specific verb.
```
instance.request(uri:string, method:string[, options: object])
```
### get
Convenience way to issue a GET request.
```
instance.get(uri:string[, options: object])
```
### post
Convenience way to issue a POST request.
```
instance.post(uri:string[, options: object])
```
### put
Convenience way to issue a PUT request.
```
instance.put(uri:string[, options: object])
```
### delete
Convenience way to issue a DELETE request.
```
instance.delete(uri:string[, options: object])
```
### patch
Convenience way to issue a PATCH request.
```
instance.patch(uri:string[, options: object])
```
## Build-in middlewares
### query
This middleware could add the ability to append object value to query string:
```js
// Add query middleware
client.addMiddleware(query());
// Request
client.get('test', {
query: {
foo: 'FOO',
bar: 'BAR',
},
});
```
It will request to `http://api.example.com/endpoint/test?foo=FOO&bar=BAR`.
### form
Like `query`, this could be used to handle post form values.
```js
// Add form middleware
client.addMiddleware(form());
// Request
client.post('test', {
form: {
foo: 'FOO',
bar: 'BAR',
},
});
```
### header
A convenience middleware to add headers to request.
```js
// Add header middleware
client.addMiddleware(header({
'X-Request-By': 'FetchHttpClient',
}));
```
### userAgent
A convenience middleware to set User-Agent to headers.
```js
// Add header middleware
client.addMiddleware(userAgent({
'Client': '1.1',
}));
```
### json
Convert object to request and parse from response.
```js
// Add json middleware
client.addMiddleware(json());
// Request
client.post('add', {
json: {
foo: 'FOO',
},
}).then(response => {
console.log(response.jsonData);
});
```
### timeout
Set timeout options to fetch.
```js
// global timeout option
client.addMiddleware(timeout(1000));
// Request timeout option priority global timeout option
client.get('test', {
timeout: 2000, // If you not add timeout middleware, it will not take effect
});
```
### credentials
Set credentials options to fetch. If you want to automatically send cookies for the current domain, use this middleware and config it as `same-origin`.
```js
// Add credentials middleware
client.addMiddleware(credentials('same-origin'));
```
# Feedback
If you have any questions, use [Issues](https://github.com/starlight36/fetch-http-client/issues).
Sina Weibo: [@starlight36](http://weibo.com/starlight36)
# License
MIT Licence.