Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vitorluizc/create-request
Apply interceptors to `fetch` and create a custom request function.
https://github.com/vitorluizc/create-request
async bili fetch fetch-api http-client https-client intercept-fetch interceptors javascript promise request request-promise typescript whatwg-fetch
Last synced: 3 months ago
JSON representation
Apply interceptors to `fetch` and create a custom request function.
- Host: GitHub
- URL: https://github.com/vitorluizc/create-request
- Owner: VitorLuizC
- License: mit
- Created: 2018-12-26T03:00:20.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2022-01-09T20:13:54.000Z (about 3 years ago)
- Last Synced: 2024-10-31T22:47:07.899Z (3 months ago)
- Topics: async, bili, fetch, fetch-api, http-client, https-client, intercept-fetch, interceptors, javascript, promise, request, request-promise, typescript, whatwg-fetch
- Language: TypeScript
- Homepage:
- Size: 156 KB
- Stars: 37
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# `@bitty/create-request`
Apply interceptors to `fetch` and create a custom request function.
- :zap: Dependency free and pretty small, **0.3KB** (minified + gzipped);
- :label: Well type defined with TypeScript (with _generics_);
- :package: There are ESM, CommonJS and UMD distributions;
## Installation
This library is published in the NPM registry and can be installed using any compatible package manager.
```sh
npm install @bitty/create-request --save
# Use the command below if you're using Yarn.
yarn add @bitty/create-request
```
## Usage
`@bitty/create-request` is curry function, which applies interceptors to `fetch` and returns a new request function.
```ts
import createRequest from '@bitty/create-request';
type Method = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
const request = createRequest(window.fetch, {
onRequest: (method: Method, route: string, data: any = undefined) => ({
url: 'https://api.example.com' + route,
body: JSON.stringify(data),
method,
headers: { 'Content-Type': 'application/json' }
}),
onResponse: (response: Response) => {
if (response.status === 403)
throw new Error('Authorization error.');
return response.json();
},
onError: (error:? Error) => {
sentry.captureException(error);
return Promise.reject(message);
}
});
request('POST', '/user', {
name: 'Vitor'
})
.then((response) => response.success && alert('User was created!'));
```
### Interceptors
- **`onError`**
```ts
onError?: (reason?: Error) => Promise;
```
Handle request and response errors.
- **`onRequest`**
```ts
onRequest?: (...params: A) => RequestOptions;
```
Handle request and define request arguments. `A` generic type defines returned `request` function arguments type.
- **`onRequestError`**
```ts
onRequestError?: (reason?: Error) => Promise;
```
Handle request errors. Overwrites `onError` handling request errors.
- **`onResponse`**
```ts
onResponse?: (response: R) => R | PromiseLike;
```
Handle response and define the request return. `R` generic type defines returned `request` function result type.
- **`onResponseError`**
```ts
onResponseError?: (reason?: Error) => Promise;
```
Handle response errors. Overwrites `onError` handling response errors.
### Usage on unsupported browsers
[Do I support `fetch`?](https://caniuse.com/#feat=fetch)
Older browsers don't support `Fetch API`, but you can use [`unfetch`](https://github.com/developit/unfetch) or other polyfill to achieve it.
```js
import fetch from 'unfetch';
import createRequest from '@bitty/create-request';
export default createRequest(fetch, {
onRequest: (options) => ({
...options,
headers: {
...options.headers,
'Content-Type': 'application/json'
}
}),
onResponse: (response) => response.json()
});
```
### Usage on Node.js
Node environment does not provide global `fetch` function, but you can use [`node-fetch`](https://github.com/bitinn/node-fetch) to achieve it.
```js
const fetch = require('node-fetch');
const createRequest = require('@bitty/create-request');
module.exports = createRequest(fetch, {
onResponse (response) {
return response.json();
}
});
```
## License
Released under [MIT License](./LICENSE).