Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/easywebapp/koajax
HTTP Client based on Koa-like middlewares
https://github.com/easywebapp/koajax
ajax client http koa middleware request
Last synced: 16 days ago
JSON representation
HTTP Client based on Koa-like middlewares
- Host: GitHub
- URL: https://github.com/easywebapp/koajax
- Owner: EasyWebApp
- Created: 2019-11-25T17:07:57.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2024-10-28T17:11:06.000Z (16 days ago)
- Last Synced: 2024-10-28T18:42:53.613Z (16 days ago)
- Topics: ajax, client, http, koa, middleware, request
- Language: TypeScript
- Homepage: https://web-cell.dev/KoAJAX/
- Size: 498 KB
- Stars: 11
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: ReadMe.md
Awesome Lists containing this project
README
# KoAJAX
**HTTP Client** based on [Koa-like middlewares][1]
[][2]
[][3]
[][4]
[][5]
## Feature
### Request Body
Automatic Serialized types:
1. Pure text: `string`
2. Form encoding: `URLSearchParams`, `FormData`
3. DOM object: `Node`
4. JSON object: `Object`
5. Binary data: `Blob`, `ArrayBuffer`, TypedArray, `DataView`
6. Stream object: `ReadableStream`
### Response Body
Automatic Parsed type:
1. HTML/XML: `Document`
2. JSON: `Object`
3. Binary data: `ArrayBuffer`
## Usage
### Browser
#### Installation
```shell
npm install koajax
```
#### `index.html`
```html
```
### Node.js
#### Installation
```shell
npm install koajax jsdom
```
#### `index.ts`
```javascript
import { HTTPClient } from 'koajax';
import { polyfill } from 'koajax/source/polyfill'
const origin = 'https://your-target-origin.com';
polyfill(origin).then(() => {
const client = new HTTPClient({
baseURI: `${origin}/api`,
responseType: 'json'
});
const { body } = await client.get('test/interface');
console.log(body);
});
```
#### Execution
```shell
npx tsx index.ts
```
### Non-polyfillable runtimes
1. https://github.com/idea2app/KoAJAX-Taro-adapter
## Example
### RESTful API with Token-based Authorization
```javascript
import { HTTPClient } from 'koajax';
var token = '';
export const client = new HTTPClient().use(
async ({ request: { method, path, headers }, response }, next) => {
if (token) headers['Authorization'] = 'token ' + token;
await next();
if (method === 'POST' && path.startsWith('/session'))
token = response.headers.Token;
}
);
client.get('/path/to/your/API').then(console.log);
```
### Up/Download files
#### Single HTTP request based on XMLHTTPRequest `progress` events
(based on [Async Generator][6])
```javascript
import { request } from 'koajax';
document.querySelector('input[type="file"]').onchange = async ({
target: { files }
}) => {
for (const file of files) {
const { upload, download, response } = request({
method: 'POST',
path: '/files',
body: file,
responseType: 'json'
});
for await (const { loaded } of upload)
console.log(`Upload ${file.name} : ${(loaded / file.size) * 100}%`);
const { body } = await response;
console.log(`Upload ${file.name} : ${body.url}`);
}
};
```
#### Multiple HTTP requests based on `Range` header
```shell
npm i native-file-system-adapter # Web standard API polyfill
```
```javascript
import { showSaveFilePicker } from 'native-file-system-adapter';
import { HTTPClient } from 'koajax';
const bufferClient = new HTTPClient({ responseType: 'arraybuffer' });
document.querySelector('#download').onclick = async () => {
const fileURL = 'https://your.server/with/Range/header/supported/file.zip';
const suggestedName = new URL(fileURL).pathname.split('/').pop();
const fileHandle = await showSaveFilePicker({ suggestedName });
const writer = await fileHandle.createWritable(),
stream = bufferClient.download(fileURL);
try {
for await (const { total, loaded, percent, buffer } of stream) {
await writer.write(buffer);
console.table({ total, loaded, percent });
}
window.alert(`File ${fileHandle.name} downloaded successfully!`);
} finally {
await writer.close();
}
};
```
### Global Error fallback
```shell
npm install browser-unhandled-rejection # Web standard API polyfill
```
```javascript
import { auto } from 'browser-unhandled-rejection';
import { HTTPError } from 'koajax';
auto();
window.addEventListener('unhandledrejection', ({ reason }) => {
if (!(reason instanceof HTTPError)) return;
const { message } = reason.response.body;
if (message) window.alert(message);
});
```
### Read Files
(based on [Async Generator][6])
```javascript
import { readAs } from 'koajax';
document.querySelector('input[type="file"]').onchange = async ({
target: { files }
}) => {
for (const file of files) {
const { progress, result } = readAs(file, 'dataURL');
for await (const { loaded } of progress)
console.log(
`Loading ${file.name} : ${(loaded / file.size) * 100}%`
);
const URI = await result;
console.log(`Loaded ${file.name} : ${URI}`);
}
};
```
[1]: https://github.com/koajs/koa#middleware
[2]: https://libraries.io/npm/koajax
[3]: https://github.com/EasyWebApp/KoAJAX/actions/workflows/main.yml
[4]: https://www.jsdelivr.com/package/npm/koajax
[5]: https://nodei.co/npm/koajax/
[6]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for-await...of#Iterating_over_async_generators