A http client wrapper for Fetch API with middleware support.
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 and 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.
npminstallfetch-http-client--save
Import
importFetchHttpClient,{json}from'fetch-http-client';
Quick start
//Createanewclientobject.
constclient=newFetchHttpClient('http://api.example.com/endpoint');
//Addaccesstoken
client.addMiddleware(request=>{
request.options.headers['X-Access-Token']='secret';
});
//Addjsonsupport
client.addMiddleware(json());
//AddLogging
client.addMiddleware(request=>response=>{
console.log(request,response);
});
//Firerequest.
client.get('test').then(response=>console.log(response.jsonData));
//Pathvariablessupport.
See AlsoFetch data from multiple endpoints with the Fetch APIHow to Turn Any Website into an APIExtracting data from a Web API - documentation.eccenca.comW3Schools.comclient.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:
//Addaccesstokenasynchronously
client.addMiddleware(request=>{
returnAsynchronousStorage.fetch('accessToken').then(token=>{
request.options.headers['X-Access-Token']=token;
returnrequest;
});
});
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!
FetchHttpClient
newFetchHttpClient(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:
//Addquerymiddleware
client.addMiddleware(query());
//Request
See AlsoWays of Fetching Data from APIclient.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.
//Addformmiddleware
client.addMiddleware(form());
//Request
client.post('test',{
form:{
foo:'FOO',
bar:'BAR',
},
});
header
A convenience middleware to add headers to request.
//Addheadermiddleware
client.addMiddleware(header({
'X-Request-By':'FetchHttpClient',
}));
userAgent
A convenience middleware to set User-Agent to headers.
//Addheadermiddleware
client.addMiddleware(userAgent({
'Client':'1.1',
}));
json
Convert object to request and parse from response.
//Addjsonmiddleware
client.addMiddleware(json());
//Request
client.post('add',{
json:{
foo:'FOO',
},
}).then(response=>{
console.log(response.jsonData);
});
timeout
Set timeout options to fetch.
//Addtimeoutmiddleware
client.addMiddleware(timeout(1000));
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.
//Addcredentialsmiddleware
client.addMiddleware(credentials('same-origin'));
If you have any questions, use Issues.
Sina Weibo: @starlight36
MIT Licence.
