KoAJAX

كواجاكس

عميل HTTP يعتمد على البرامج الوسيطة الشبيهة بـ Koa

ميزة

هيئة الطلب

الأنواع التسلسلية التلقائية:

1. النص النقي: string
2. ترميز النموذج: URLSearchParams ، FormData
3. كائن DOM: Node
4. كائن JSON: Object
5. البيانات الثنائية: Blob ، ArrayBuffer ، TypedArray، DataView
6. كائن الدفق: ReadableStream

هيئة الاستجابة

نوع التحليل التلقائي:

1. HTML/XML: Document
2. JSON: Object
3. البيانات الثنائية: ArrayBuffer

الاستخدام

المتصفح

تثبيت

npm 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 >

Node.js

تثبيت

npm install koajax core - js jsdom

index.ts

 import { 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

أوقات التشغيل غير القابلة للتعبئة

1. https://github.com/idea2app/KoAJAX-Taro-adapter

مثال

واجهة برمجة تطبيقات RESTful مع تفويض قائم على الرمز المميز

 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 ) ;

رفع/تنزيل الملفات

طلب HTTP واحد يعتمد على أحداث progress XMLHTTPRequest

(استنادًا إلى المولد غير المتزامن)

 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 } ` ) ;
    }
} ; 

طلب HTTP واحد يعتمد على جلب التدفقات duplex

هذه الميزة التجريبية لها بعض القيود.

 - 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}`);
    }
};

طلبات HTTP متعددة بناءً على رأس Range

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 ) ;
} ) ;

قراءة الملفات

(استنادًا إلى المولد غير المتزامن)

 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 } ` ) ;
    }
} ;