@cerebral/http
Advanced tools
Comparing version
{ | ||
"name": "@cerebral/http", | ||
"version": "2.0.0", | ||
"version": "2.0.1-1505164072008", | ||
"description": "HTTP provider for Cerebral 2", | ||
@@ -26,12 +26,9 @@ "main": "lib/index.js", | ||
"homepage": "https://github.com/cerebral/cerebral/tree/master/packages/http#readme", | ||
"dependencies": { | ||
"function-tree": "^1.0.1" | ||
}, | ||
"peerDependencies": { | ||
"cerebral": "^2.1.0" | ||
"cerebral": "^2.2.2-1505164072008" | ||
}, | ||
"devDependencies": { | ||
"cerebral": "^2.1.0", | ||
"cerebral": "^2.2.2-1505164072008", | ||
"xhr-mock": "^1.9.0" | ||
} | ||
} |
308
README.md
# @cerebral/http | ||
## install | ||
## Install | ||
**NPM** | ||
@@ -8,3 +8,3 @@ | ||
## description | ||
## Description | ||
The HTTP provider exposes the ability to do HTTP requests both in actions and directly in signals. It supports **cors** and file upload, with progress handling. It default to **json**, but you can configure it to whatever you want. | ||
@@ -27,3 +27,3 @@ | ||
## instantiate | ||
## Instantiate | ||
@@ -64,2 +64,39 @@ ```js | ||
## abort | ||
You can abort any running request, causing the request to resolve as status code **0** and set an **isAborted** property on the response object. | ||
```js | ||
function searchItems({input, state, path, http}) { | ||
http.abort('/items*') // regexp string | ||
return http.get(`/items?query=${input.query}`) | ||
.then(path.success) | ||
.catch((error) => { | ||
if (error.isAborted) { | ||
return path.abort() | ||
} | ||
return path.error({error}) | ||
}) | ||
} | ||
export default [ | ||
searchItems, { | ||
success: [], | ||
error: [], | ||
abort: [] | ||
} | ||
] | ||
``` | ||
## cors | ||
Cors has been turned into a "black box" by jQuery. Cors is actually a very simple concept, but due to a lot of confusion of "Request not allowed", **cors** has been an option to help out. In HttpProvider we try to give you the insight to understand how cors actually works. | ||
Cors has nothing to do with the client. The only client configuration related to cors is the **withCredentials** option, which makes sure cookies are passed to the cross origin server. The only requirement for cors to work is that you pass the correct **Content-Type**. Now, this depends on the server in question. Some servers allows any content-type, others require a specific one. These are the typical ones: | ||
- text/plain | ||
- application/x-www-form-urlencoded | ||
- application/json; charset=UTF-8 | ||
Note that this is only related to the **request**. If you want to define what you want as response, you set the **Accept** header, which is *application/json* by default. | ||
## errors | ||
@@ -124,73 +161,16 @@ | ||
## request | ||
## delete | ||
```js | ||
function someGetAction ({http}) { | ||
return http.request({ | ||
// Any http method | ||
method: 'GET', | ||
// Url you want to request to | ||
url: '/items' | ||
// Request body as object. Will automatically be stringified if json and | ||
// urlEncoded if application/x-www-form-urlencoded | ||
body: {}, | ||
// Query as object, will automatically be urlEncoded | ||
query: {}, | ||
// If cross origin request, pass cookies | ||
withCredentials: false, | ||
// Any additional http headers, or overwrite default | ||
headers: {}, | ||
// A function or signal path (foo.bar.requestProgressed) that | ||
// triggers on request progress. Passes {progress: 45} etc. | ||
onProgress: null | ||
}) | ||
} | ||
``` | ||
## responses | ||
There are two types of responses from the HTTP provider. A **response** and an **error** of type *HttpProviderError*. A **response** will be received on status codes 200-299. Everything else is an **error**. | ||
### response | ||
```js | ||
{ | ||
result: 'the response body', | ||
headers: {...}, | ||
status: 200, | ||
isAborted: false | ||
} | ||
``` | ||
### error | ||
```js | ||
{ | ||
name: 'HttpProviderError', | ||
message: 'Some potential error message', | ||
result: 'Message or response body', | ||
status: 500, | ||
isAborted: false, | ||
headers: {}, | ||
stack: '...' | ||
} | ||
``` | ||
## get | ||
### action | ||
```js | ||
function someGetAction ({http}) { | ||
function someDeleteAction ({http}) { | ||
const query = {} | ||
const options = {} | ||
return http.get('/items', query, options) | ||
return http.delete('/items/1', query, options) | ||
.then((response) => { | ||
return {someResponse: response} | ||
return {response} | ||
}) | ||
.catch((error) => { | ||
return {someError: error} | ||
return {error} | ||
}) | ||
@@ -202,6 +182,7 @@ } | ||
```js | ||
import {httpGet} from '@cerebral/http/operators' | ||
import {httpPost} from '@cerebral/http/operators' | ||
import {state} from 'cerebral/tags' | ||
export default [ | ||
httpGet('/items'), | ||
httpDelete(string`/items/${state`currentItemId`}`), | ||
/* | ||
@@ -215,10 +196,9 @@ PROPS: { | ||
On error this will throw to the signal or global catch handler. | ||
### operator with paths | ||
```js | ||
import {httpGet} from '@cerebral/http/operators' | ||
import {httpPost} from '@cerebral/http/operators' | ||
import {state} from 'cerebral/tags' | ||
export default [ | ||
httpGet('/items'), { | ||
httpDelete(string`/items/${state`currentItemId`}`), { | ||
success: [ | ||
@@ -242,16 +222,16 @@ /* PROPS: {response: {...}} */ | ||
## post | ||
## get | ||
### action | ||
```js | ||
function somePostAction ({http}) { | ||
const data = {} | ||
function someGetAction ({http}) { | ||
const query = {} | ||
const options = {} | ||
return http.post('/items', data, options) | ||
return http.get('/items', query, options) | ||
.then((response) => { | ||
return {response} | ||
return {someResponse: response} | ||
}) | ||
.catch((error) => { | ||
return {error} | ||
return {someError: error} | ||
}) | ||
@@ -263,10 +243,6 @@ } | ||
```js | ||
import {httpPost} from '@cerebral/http/operators' | ||
import {props} from 'cerebral/tags' | ||
import {httpGet} from '@cerebral/http/operators' | ||
export default [ | ||
httpPost('/items', { | ||
title: props`itemTitle`, | ||
foo: 'bar' | ||
}), | ||
httpGet('/items'), | ||
/* | ||
@@ -280,12 +256,10 @@ PROPS: { | ||
On error this will throw to the signal or global catch handler. | ||
### operator with paths | ||
```js | ||
import {httpPost} from '@cerebral/http/operators' | ||
import {props} from 'cerebral/tags' | ||
import {httpGet} from '@cerebral/http/operators' | ||
export default [ | ||
httpPost('/items', { | ||
title: props`itemTitle`, | ||
foo: 'bar' | ||
}), { | ||
httpGet('/items'), { | ||
success: [ | ||
@@ -309,11 +283,11 @@ /* PROPS: {response: {...}} */ | ||
## put | ||
## patch | ||
### action | ||
```js | ||
function somePutAction ({http}) { | ||
function somePatchAction ({http}) { | ||
const data = {} | ||
const options = {} | ||
return http.put('/items/1', data, options) | ||
return http.patch('/items/1', data, options) | ||
.then((response) => { | ||
@@ -330,8 +304,7 @@ return {response} | ||
```js | ||
import {httpPost} from '@cerebral/http/operators' | ||
import {httpPatch} from '@cerebral/http/operators' | ||
import {state, props, string} from 'cerebral/tags' | ||
export default [ | ||
httpPut('/items', { | ||
// data object | ||
}), | ||
httpPatch(string`/items/${props`itemId`}`, state`patchData`), | ||
/* | ||
@@ -347,8 +320,7 @@ PROPS: { | ||
```js | ||
import {httpPost} from '@cerebral/http/operators' | ||
import {httpPatch} from '@cerebral/http/operators' | ||
import {state, props, string} from 'cerebral/tags' | ||
export default [ | ||
httpPut('/items', { | ||
// data object | ||
}), { | ||
httpPatch(string`/items/${props`itemId`}`, state`patchData`), { | ||
success: [ | ||
@@ -372,11 +344,11 @@ /* PROPS: {response: {...}} */ | ||
## patch | ||
## post | ||
### action | ||
```js | ||
function somePatchAction ({http}) { | ||
function somePostAction ({http}) { | ||
const data = {} | ||
const options = {} | ||
return http.patch('/items/1', data, options) | ||
return http.post('/items', data, options) | ||
.then((response) => { | ||
@@ -393,7 +365,10 @@ return {response} | ||
```js | ||
import {httpPatch} from '@cerebral/http/operators' | ||
import {state, props, string} from 'cerebral/tags' | ||
import {httpPost} from '@cerebral/http/operators' | ||
import {props} from 'cerebral/tags' | ||
export default [ | ||
httpPatch(string`/items/${props`itemId`}`, state`patchData`), | ||
httpPost('/items', { | ||
title: props`itemTitle`, | ||
foo: 'bar' | ||
}), | ||
/* | ||
@@ -409,7 +384,10 @@ PROPS: { | ||
```js | ||
import {httpPatch} from '@cerebral/http/operators' | ||
import {state, props, string} from 'cerebral/tags' | ||
import {httpPost} from '@cerebral/http/operators' | ||
import {props} from 'cerebral/tags' | ||
export default [ | ||
httpPatch(string`/items/${props`itemId`}`, state`patchData`), { | ||
httpPost('/items', { | ||
title: props`itemTitle`, | ||
foo: 'bar' | ||
}), { | ||
success: [ | ||
@@ -433,11 +411,11 @@ /* PROPS: {response: {...}} */ | ||
## delete | ||
## put | ||
### action | ||
```js | ||
function someDeleteAction ({http}) { | ||
const query = {} | ||
function somePutAction ({http}) { | ||
const data = {} | ||
const options = {} | ||
return http.delete('/items/1', query, options) | ||
return http.put('/items/1', data, options) | ||
.then((response) => { | ||
@@ -455,6 +433,7 @@ return {response} | ||
import {httpPost} from '@cerebral/http/operators' | ||
import {state} from 'cerebral/tags' | ||
export default [ | ||
httpDelete(string`/items/${state`currentItemId`}`), | ||
httpPut('/items', { | ||
// data object | ||
}), | ||
/* | ||
@@ -471,6 +450,7 @@ PROPS: { | ||
import {httpPost} from '@cerebral/http/operators' | ||
import {state} from 'cerebral/tags' | ||
export default [ | ||
httpDelete(string`/items/${state`currentItemId`}`), { | ||
httpPut('/items', { | ||
// data object | ||
}), { | ||
success: [ | ||
@@ -494,2 +474,59 @@ /* PROPS: {response: {...}} */ | ||
## responses | ||
There are two types of responses from the HTTP provider. A **response** and an **error** of type *HttpProviderError*. A **response** will be received on status codes 200-299. Everything else is an **error**. | ||
### response | ||
```js | ||
{ | ||
result: 'the response body', | ||
headers: {...}, | ||
status: 200, | ||
isAborted: false | ||
} | ||
``` | ||
### error | ||
```js | ||
{ | ||
name: 'HttpProviderError', | ||
message: 'Some potential error message', | ||
result: 'Message or response body', | ||
status: 500, | ||
isAborted: false, | ||
headers: {}, | ||
stack: '...' | ||
} | ||
``` | ||
## request | ||
```js | ||
function someGetAction ({http}) { | ||
return http.request({ | ||
// Any http method | ||
method: 'GET', | ||
// Url you want to request to | ||
url: '/items' | ||
// Request body as object. Will automatically be stringified if json and | ||
// urlEncoded if application/x-www-form-urlencoded | ||
body: {}, | ||
// Query as object, will automatically be urlEncoded | ||
query: {}, | ||
// If cross origin request, pass cookies | ||
withCredentials: false, | ||
// Any additional http headers, or overwrite default | ||
headers: {}, | ||
// A function or signal path (foo.bar.requestProgressed) that | ||
// triggers on request progress. Passes {progress: 45} etc. | ||
onProgress: null | ||
}) | ||
} | ||
``` | ||
## uploadFile | ||
@@ -558,38 +595,1 @@ | ||
``` | ||
## abort | ||
You can abort any running request, causing the request to resolve as status code **0** and set an **isAborted** property on the response object. | ||
```js | ||
function searchItems({input, state, path, http}) { | ||
http.abort('/items*') // regexp string | ||
return http.get(`/items?query=${input.query}`) | ||
.then(path.success) | ||
.catch((error) => { | ||
if (error.isAborted) { | ||
return path.abort() | ||
} | ||
return path.error({error}) | ||
}) | ||
} | ||
export default [ | ||
searchItems, { | ||
success: [], | ||
error: [], | ||
abort: [] | ||
} | ||
] | ||
``` | ||
## cors | ||
Cors has been turned into a "black box" by jQuery. Cors is actually a very simple concept, but due to a lot of confusion of "Request not allowed", **cors** has been an option to help out. In HttpProvider we try to give you the insight to understand how cors actually works. | ||
Cors has nothing to do with the client. The only client configuration related to cors is the **withCredentials** option, which makes sure cookies are passed to the cross origin server. The only requirement for cors to work is that you pass the correct **Content-Type**. Now, this depends on the server in question. Some servers allows any content-type, others require a specific one. These are the typical ones: | ||
- text/plain | ||
- application/x-www-form-urlencoded | ||
- application/json; charset=UTF-8 | ||
Note that this is only related to the **request**. If you want to define what you want as response, you set the **Accept** header, which is *application/json* by default. |
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
1
-50%71951
-0.02%2
100%- Removed