HTTP Client based on Koa-like middlewares
Automatic Serialized types:
stringURLSearchParams, FormDataNodeObjectBlob, ArrayBuffer, TypedArray, DataViewReadableStreamAutomatic Parsed type:
DocumentObjectArrayBuffernpm install koajax
index.html<head>
<script src="https://polyfill.web-cell.dev/feature/Regenerator.js"></script>
<script src="https://polyfill.web-cell.dev/feature/ECMAScript.js"></script>
<script src="https://polyfill.web-cell.dev/feature/TextEncoder.js"></script>
<script src="https://polyfill.web-cell.dev/feature/AbortController.js"></script>
<script src="https://polyfill.web-cell.dev/feature/Stream.js"></script>
</head>
npm install koajax core-js jsdom
index.tsimport { polyfill } from 'koajax/source/polyfill';
import { HTTPClient } from 'koajax';
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);
});
npx tsx index.ts
npm install event-target-shim taro-fetch-polyfill
Following Example comes from https://github.com/idea2app/Taro-Vant-MobX-ts/blob/70f33be5b2365b8126ed93663905329eae25fbf0/src/store/service.ts
import { Event, EventTarget } from 'event-target-shim';
import { defaultHTTPRuntime, HTTPToolkit } from 'koajax';
import { Blob, Headers, ReadableStream, fetch } from 'taro-fetch-polyfill';
const { request } = new HTTPToolkit({
...defaultHTTPRuntime,
Event: Event as typeof globalThis.Event,
EventTarget: EventTarget as typeof globalThis.EventTarget,
Headers,
Blob,
ReadableStream,
fetch: fetch as typeof globalThis.fetch
});
export const httpClient = new HTTPClient({ baseRequest: request });
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);
progress events(based on Async Generator)
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}`);
}
};
duplex streamsThis experimental feature has some limitations.
-import { request } from 'koajax';
+import { requestFetch } from 'koajax';
document.querySelector('input[type="file"]').onchange = async ({
target: { files }
}) => {
for (const file of files) {
- const { upload, download, response } = request({
+ const { upload, download, response } = requestFetch({
method: 'POST',
path: '/files',
+ headers: {
+ 'Content-Type': file.type,
+ 'Content-Length': file.size + ''
+ },
- body: file,
+ body: file.stream(),
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}`);
}
};
Range headernpm i native-file-system-adapter # Web standard API polyfill
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();
}
};
npm install browser-unhandled-rejection # Web standard API polyfill
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);
});
(based on Async Generator)
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}`);
}
};
FAQs
HTTP Client based on Koa-like middlewares
The npm package koajax receives a total of 131 weekly downloads. As such, koajax popularity was classified as not popular.
We found that koajax demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
Malicious packages published to npm, PyPI, Go Modules, crates.io, and Packagist impersonate developer tooling to fetch staged malware, steal credentials and wallets, and enable remote access.
Security News
Microsoft has released an open source toolkit for enforcing runtime security policies on AI agents as adoption accelerates faster than governance controls.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.