https://github.com/jvanbruegge/minireq
A minimal request library for the browser
https://github.com/jvanbruegge/minireq
browser hacktoberfest http-client typescript xmlhttprequest
Last synced: about 1 year ago
JSON representation
A minimal request library for the browser
- Host: GitHub
- URL: https://github.com/jvanbruegge/minireq
- Owner: jvanbruegge
- Created: 2020-02-09T16:44:10.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-08-03T06:50:14.000Z (almost 3 years ago)
- Last Synced: 2025-03-24T11:56:50.833Z (over 1 year ago)
- Topics: browser, hacktoberfest, http-client, typescript, xmlhttprequest
- Language: TypeScript
- Homepage:
- Size: 662 KB
- Stars: 45
- Watchers: 5
- Forks: 2
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# minireq
  [](https://codecov.io/gh/jvanbruegge/minireq) [](https://github.com/prettier/prettier)
A minimal request library built on XMLHTTPRequest for the browser, and for nodejs with the same API.
Documentation on [Github Pages](https://jvanbruegge.github.io/minireq/)
## Why not fetch, axios or superagent
`fetch` is too bare bones and also does not support features like progress indication. `axios` and `superagent` are neither minimal nor are they written with ES modules with makes them awkward to bundle.
Also I want a request library with better types than currently available.
## Example
```ts
import { makeRequest } from '@minireq/browser';
// If you are using nodejs, you can use
// import { makeRequest } from '@minireq/node';
const request = makeRequest();
const { promise, abort } = request({
method: 'GET',
url: '/api/users',
});
// Abort on user click
document.querySelector('button.abortRequest').addEventListener('click', () => {
abort();
});
promise.then(({ status, data }) => {
if (status === 200) {
console.log(data.name);
}
});
```
Making a post request, with a timeout on 500ms
```ts
import { makeRequest } from '@minireq/browser';
const request = makeRequest();
const { promise } = request({
method: 'POST',
url: '/api/users',
send: {
name: 'Peter',
age: 50,
children: [],
},
timeout: 500,
});
promise.then(({ status, data }) => {
if (status === 201) {
console.log(data.id);
}
});
```
Using a custom content type
```ts
import { makeRequest, defaultSerializers } from '@minireq/browser';
const serializer = {
parse: (data: string) => data.split('\n').map(x => JSON.parse(x)),
convert: (data: any) => {
if (!Array.isArray(data)) {
return [JSON.stringify(data)];
} else {
return data.map(x => JSON.stringify(x)).join('\n');
}
},
};
const { request } = makeRequest({
...defaultSerializers,
'application/ndjson': serializer,
});
const { promise, abort } = request({
method: 'GET',
url: '/api/users',
accept: 'application/ndjson',
});
const { status, data } = await promise;
if (status === 200) {
console.log(data.length);
}
```