HTTP Client based on Koa-like middlewares
Automatic Serialized types:
- Pure text:
string - Form encoding:
URLSearchParams,FormData - DOM object:
Node - JSON object:
Object - Binary data:
Blob,ArrayBuffer, TypedArray,DataView - Stream object:
ReadableStream
Automatic Parsed type:
- HTML/XML:
Document - JSON:
Object - Binary data:
ArrayBuffer
npm install koajax
<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 jsdomimport { 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
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);
(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}`); } };
This 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}`); } };
npm 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}`); } };