@kevisual/query 0.0.13 → 0.0.15

package/dist/query-adapter.d.ts

@@ -1,8 +1,11 @@
+declare const methods: readonly ["GET", "POST"];
+type Method = (typeof methods)[number];
 type AdapterOpts = {
     url: string;
     headers?: Record<string, string>;
     body?: Record<string, any>;
     timeout?: number;
+    method?: Method;
 };
 /**
  *
@@ -16,4 +19,5 @@ declare const adapter: (opts: AdapterOpts, overloadOpts?: RequestInit) => Promis
  */
 declare const queryFetch: (opts: AdapterOpts, overloadOpts?: RequestInit) => Promise<any>;
 
-export { adapter, queryFetch };
+export { adapter, methods, queryFetch };
+export type { AdapterOpts, Method };

package/dist/query-adapter.js

@@ -1,3 +1,4 @@
+const methods = ['GET', 'POST'];
 /**
  *
  * @param opts
@@ -11,15 +12,29 @@ const adapter = async (opts, overloadOpts) => {
     const timer = setTimeout(() => {
         controller.abort();
     }, timeout);
-    return fetch(opts.url, {
-        method: 'POST',
+    let method = overloadOpts?.method || opts.method || 'POST';
+    let origin = '';
+    let url;
+    if (opts?.url?.startsWith('http')) {
+        url = new URL(opts.url);
+    }
+    else {
+        origin = window?.location?.origin || 'http://localhost:11015';
+        url = new URL(opts.url, origin);
+    }
+    const isGet = method === 'GET';
+    if (isGet) {
+        url.search = new URLSearchParams(opts.body).toString();
+    }
+    return fetch(url, {
+        method: method.toUpperCase(),
         headers: {
             'Content-Type': 'application/json',
             ...opts.headers,
         },
-        body: JSON.stringify(opts.body),
         signal,
         ...overloadOpts,
+        body: isGet ? undefined : JSON.stringify(opts.body),
     })
         .then((response) => {
         // 获取 Content-Type 头部信息
@@ -50,4 +65,4 @@ const adapter = async (opts, overloadOpts) => {
  */
 const queryFetch = adapter;
 
-export { adapter, queryFetch };
+export { adapter, methods, queryFetch };

package/dist/query-browser.d.ts

@@ -1,10 +1,13 @@
 import { StoreApi } from 'zustand/vanilla';
 
+declare const methods: readonly ["GET", "POST"];
+type Method = (typeof methods)[number];
 type AdapterOpts = {
     url: string;
     headers?: Record<string, string>;
     body?: Record<string, any>;
     timeout?: number;
+    method?: Method;
 };
 /**
  *
@@ -37,14 +40,39 @@ declare class QueryWs {
     connect(opts?: {
         timeout?: number;
     }): Promise<unknown>;
+    /**
+     * ws.onopen 必须用这个去获取，否者会丢失链接信息
+     * @param callback
+     * @returns
+     */
     listenConnect(callback: () => void): () => void;
+    listenClose(callback: () => void): () => void;
     onMessage<T = any, U = any>(fn: (data: U, event: MessageEvent) => void, opts?: {
+        /**
+         * 是否将数据转换为 JSON
+         */
         isJson?: boolean;
+        /**
+         * 选择器
+         */
         selector?: (data: T) => U;
     }): () => void;
     close(): void;
+    /**
+     * 发送消息
+     *
+     * @param data
+     * @param opts
+     * @returns
+     */
     send<T = any, U = any>(data: T, opts?: {
+        /**
+         * 是否将数据转换为 JSON
+         */
         isJson?: boolean;
+        /**
+         * 包装数据
+         */
         wrapper?: (data: T) => U;
     }): void;
     getOpen(): boolean;
@@ -67,6 +95,8 @@ type QueryOpts$1 = {
     adapter?: typeof adapter;
     headers?: Record<string, string>;
     timeout?: number;
+    method?: Method;
+    [key: string]: any;
 };
 type Data = {
     path?: string;
@@ -93,11 +123,11 @@ type Result<S = any> = {
 };
 type DataOpts = Partial<QueryOpts$1> & {
     beforeRequest?: Fn;
-    afterResponse?: <S, U = S>(result: Result<S>, ctx?: {
+    afterResponse?: <S = any>(result: Result<S>, ctx?: {
         req?: any;
         res?: any;
         fetch?: any;
-    }) => Promise<U>;
+    }) => Promise<Result<S>>;
 };
 /**
  * const query = new Query();
@@ -111,7 +141,7 @@ type DataOpts = Partial<QueryOpts$1> & {
 declare class Query {
     adapter: typeof adapter;
     url: string;
-    beforeRequest?: Fn;
+    beforeRequest?: DataOpts['beforeRequest'];
     afterResponse?: DataOpts['afterResponse'];
     headers?: Record<string, string>;
     timeout?: number;
@@ -146,12 +176,12 @@ declare class Query {
      * 请求前处理，设置请求前处理函数
      * @param fn 处理函数
      */
-    before(fn: Fn): void;
+    before(fn: DataOpts['beforeRequest']): void;
     /**
      * 请求后处理，设置请求后处理函数
      * @param fn 处理函数
      */
-    after(fn: (result: Result, req?: any) => Promise<any>): void;
+    after(fn: DataOpts['afterResponse']): void;
 }
 
 type QueryOpts = {

package/dist/query-browser.js

@@ -11,15 +11,29 @@ const adapter = async (opts, overloadOpts) => {
     const timer = setTimeout(() => {
         controller.abort();
     }, timeout);
-    return fetch(opts.url, {
-        method: 'POST',
+    let method = overloadOpts?.method || opts.method || 'POST';
+    let origin = '';
+    let url;
+    if (opts?.url?.startsWith('http')) {
+        url = new URL(opts.url);
+    }
+    else {
+        origin = window?.location?.origin || 'http://localhost:11015';
+        url = new URL(opts.url, origin);
+    }
+    const isGet = method === 'GET';
+    if (isGet) {
+        url.search = new URLSearchParams(opts.body).toString();
+    }
+    return fetch(url, {
+        method: method.toUpperCase(),
         headers: {
             'Content-Type': 'application/json',
             ...opts.headers,
         },
-        body: JSON.stringify(opts.body),
         signal,
         ...overloadOpts,
+        body: isGet ? undefined : JSON.stringify(opts.body),
     })
         .then((response) => {
         // 获取 Content-Type 头部信息
@@ -118,30 +132,42 @@ class QueryWs {
      */
     async connect(opts) {
         const store = this.store;
+        const that = this;
         const connected = store.getState().connected;
         if (connected) {
             return Promise.resolve(true);
         }
         return new Promise((resolve, reject) => {
-            const ws = this.ws || new WebSocket(this.url);
-            const timeout = opts?.timeout || 5 * 60 * 1000; // 默认 2 分钟
+            const ws = that.ws || new WebSocket(that.url);
+            const timeout = opts?.timeout || 5 * 60 * 1000; // 默认 5 分钟
             let timer = setTimeout(() => {
+                const isOpen = ws.readyState === WebSocket.OPEN;
+                if (isOpen) {
+                    console.log('WebSocket 连接成功 in timer');
+                    resolve(true);
+                    return;
+                }
                 console.error('WebSocket 连接超时');
                 reject('timeout');
             }, timeout);
-            ws.onopen = () => {
+            ws.onopen = (ev) => {
                 store.getState().setConnected(true);
                 store.getState().setStatus('connected');
                 resolve(true);
                 clearTimeout(timer);
             };
-            ws.onclose = () => {
+            ws.onclose = (ev) => {
                 store.getState().setConnected(false);
                 store.getState().setStatus('disconnected');
                 this.ws = null;
             };
         });
     }
+    /**
+     * ws.onopen 必须用这个去获取，否者会丢失链接信息
+     * @param callback
+     * @returns
+     */
     listenConnect(callback) {
         const store = this.store;
         const { connected } = store.getState();
@@ -163,6 +189,28 @@ class QueryWs {
         });
         return cancel;
     }
+    listenClose(callback) {
+        const store = this.store;
+        const { status } = store.getState();
+        if (status === 'disconnected') {
+            callback();
+        }
+        const subscriptionOne = (selector, listener) => {
+            const unsubscribe = store.subscribe((newState, oldState) => {
+                if (selector(newState) !== selector(oldState)) {
+                    listener(newState, oldState);
+                    unsubscribe();
+                }
+            });
+            return unsubscribe;
+        };
+        const cancel = subscriptionOne((state) => state.status, (newState, oldState) => {
+            if (newState.status === 'disconnected') {
+                callback();
+            }
+        });
+        return cancel;
+    }
     onMessage(fn, opts) {
         const ws = this.ws;
         const isJson = opts?.isJson ?? true;
@@ -198,6 +246,13 @@ class QueryWs {
         store.getState().setConnected(false);
         store.getState().setStatus('disconnected');
     }
+    /**
+     * 发送消息
+     *
+     * @param data
+     * @param opts
+     * @returns
+     */
     send(data, opts) {
         const ws = this.ws;
         const isJson = opts?.isJson ?? true;
@@ -294,20 +349,22 @@ class Query {
      */
     async post(body, options) {
         const url = options?.url || this.url;
-        const headers = { ...this.headers, ...options?.headers };
-        const adapter = options?.adapter || this.adapter;
-        const beforeRequest = options?.beforeRequest || this.beforeRequest;
-        const afterResponse = options?.afterResponse || this.afterResponse;
-        const timeout = options?.timeout || this.timeout;
+        const { headers, adapter, beforeRequest, afterResponse, timeout, ...rest } = options || {};
+        const _headers = { ...this.headers, ...headers };
+        const _adapter = adapter || this.adapter;
+        const _beforeRequest = beforeRequest || this.beforeRequest;
+        const _afterResponse = afterResponse || this.afterResponse;
+        const _timeout = timeout || this.timeout;
         const req = {
             url: url,
-            headers: headers,
+            headers: _headers,
             body,
-            timeout,
+            timeout: _timeout,
+            ...rest,
         };
         try {
-            if (beforeRequest) {
-                await beforeRequest(req);
+            if (_beforeRequest) {
+                await _beforeRequest(req);
             }
         }
         catch (e) {
@@ -335,11 +392,11 @@ class Query {
                 }, 1000);
             });
         }
-        return adapter(req).then(async (res) => {
+        return _adapter(req).then(async (res) => {
             try {
                 setBaseResponse(res);
-                if (afterResponse) {
-                    return await afterResponse(res, {
+                if (_afterResponse) {
+                    return await _afterResponse(res, {
                         req,
                         res,
                         fetch: adapter,

package/dist/query-ws.d.ts

@@ -32,14 +32,39 @@ declare class QueryWs {
     connect(opts?: {
         timeout?: number;
     }): Promise<unknown>;
+    /**
+     * ws.onopen 必须用这个去获取，否者会丢失链接信息
+     * @param callback
+     * @returns
+     */
     listenConnect(callback: () => void): () => void;
+    listenClose(callback: () => void): () => void;
     onMessage<T = any, U = any>(fn: (data: U, event: MessageEvent) => void, opts?: {
+        /**
+         * 是否将数据转换为 JSON
+         */
         isJson?: boolean;
+        /**
+         * 选择器
+         */
         selector?: (data: T) => U;
     }): () => void;
     close(): void;
+    /**
+     * 发送消息
+     *
+     * @param data
+     * @param opts
+     * @returns
+     */
     send<T = any, U = any>(data: T, opts?: {
+        /**
+         * 是否将数据转换为 JSON
+         */
         isJson?: boolean;
+        /**
+         * 包装数据
+         */
         wrapper?: (data: T) => U;
     }): void;
     getOpen(): boolean;

package/dist/query-ws.js

@@ -70,30 +70,42 @@ class QueryWs {
      */
     async connect(opts) {
         const store = this.store;
+        const that = this;
         const connected = store.getState().connected;
         if (connected) {
             return Promise.resolve(true);
         }
         return new Promise((resolve, reject) => {
-            const ws = this.ws || new WebSocket(this.url);
-            const timeout = opts?.timeout || 5 * 60 * 1000; // 默认 2 分钟
+            const ws = that.ws || new WebSocket(that.url);
+            const timeout = opts?.timeout || 5 * 60 * 1000; // 默认 5 分钟
             let timer = setTimeout(() => {
+                const isOpen = ws.readyState === WebSocket.OPEN;
+                if (isOpen) {
+                    console.log('WebSocket 连接成功 in timer');
+                    resolve(true);
+                    return;
+                }
                 console.error('WebSocket 连接超时');
                 reject('timeout');
             }, timeout);
-            ws.onopen = () => {
+            ws.onopen = (ev) => {
                 store.getState().setConnected(true);
                 store.getState().setStatus('connected');
                 resolve(true);
                 clearTimeout(timer);
             };
-            ws.onclose = () => {
+            ws.onclose = (ev) => {
                 store.getState().setConnected(false);
                 store.getState().setStatus('disconnected');
                 this.ws = null;
             };
         });
     }
+    /**
+     * ws.onopen 必须用这个去获取，否者会丢失链接信息
+     * @param callback
+     * @returns
+     */
     listenConnect(callback) {
         const store = this.store;
         const { connected } = store.getState();
@@ -115,6 +127,28 @@ class QueryWs {
         });
         return cancel;
     }
+    listenClose(callback) {
+        const store = this.store;
+        const { status } = store.getState();
+        if (status === 'disconnected') {
+            callback();
+        }
+        const subscriptionOne = (selector, listener) => {
+            const unsubscribe = store.subscribe((newState, oldState) => {
+                if (selector(newState) !== selector(oldState)) {
+                    listener(newState, oldState);
+                    unsubscribe();
+                }
+            });
+            return unsubscribe;
+        };
+        const cancel = subscriptionOne((state) => state.status, (newState, oldState) => {
+            if (newState.status === 'disconnected') {
+                callback();
+            }
+        });
+        return cancel;
+    }
     onMessage(fn, opts) {
         const ws = this.ws;
         const isJson = opts?.isJson ?? true;
@@ -150,6 +184,13 @@ class QueryWs {
         store.getState().setConnected(false);
         store.getState().setStatus('disconnected');
     }
+    /**
+     * 发送消息
+     *
+     * @param data
+     * @param opts
+     * @returns
+     */
     send(data, opts) {
         const ws = this.ws;
         const isJson = opts?.isJson ?? true;

package/dist/query.d.ts

@@ -1,8 +1,11 @@
+declare const methods: readonly ["GET", "POST"];
+type Method = (typeof methods)[number];
 type AdapterOpts = {
     url: string;
     headers?: Record<string, string>;
     body?: Record<string, any>;
     timeout?: number;
+    method?: Method;
 };
 /**
  *
@@ -29,6 +32,8 @@ type QueryOpts = {
     adapter?: typeof adapter;
     headers?: Record<string, string>;
     timeout?: number;
+    method?: Method;
+    [key: string]: any;
 };
 type Data = {
     path?: string;
@@ -55,11 +60,11 @@ type Result<S = any> = {
 };
 type DataOpts = Partial<QueryOpts> & {
     beforeRequest?: Fn;
-    afterResponse?: <S, U = S>(result: Result<S>, ctx?: {
+    afterResponse?: <S = any>(result: Result<S>, ctx?: {
         req?: any;
         res?: any;
         fetch?: any;
-    }) => Promise<U>;
+    }) => Promise<Result<S>>;
 };
 /**
  * 设置基础响应, 设置 success 和 showError,
@@ -80,7 +85,7 @@ declare const setBaseResponse: (res: Result) => void;
 declare class Query {
     adapter: typeof adapter;
     url: string;
-    beforeRequest?: Fn;
+    beforeRequest?: DataOpts['beforeRequest'];
     afterResponse?: DataOpts['afterResponse'];
     headers?: Record<string, string>;
     timeout?: number;
@@ -115,12 +120,12 @@ declare class Query {
      * 请求前处理，设置请求前处理函数
      * @param fn 处理函数
      */
-    before(fn: Fn): void;
+    before(fn: DataOpts['beforeRequest']): void;
     /**
      * 请求后处理，设置请求后处理函数
      * @param fn 处理函数
      */
-    after(fn: (result: Result, req?: any) => Promise<any>): void;
+    after(fn: DataOpts['afterResponse']): void;
 }
 
 export { Query, adapter, setBaseResponse };

package/dist/query.js

@@ -11,15 +11,29 @@ const adapter = async (opts, overloadOpts) => {
     const timer = setTimeout(() => {
         controller.abort();
     }, timeout);
-    return fetch(opts.url, {
-        method: 'POST',
+    let method = overloadOpts?.method || opts.method || 'POST';
+    let origin = '';
+    let url;
+    if (opts?.url?.startsWith('http')) {
+        url = new URL(opts.url);
+    }
+    else {
+        origin = window?.location?.origin || 'http://localhost:11015';
+        url = new URL(opts.url, origin);
+    }
+    const isGet = method === 'GET';
+    if (isGet) {
+        url.search = new URLSearchParams(opts.body).toString();
+    }
+    return fetch(url, {
+        method: method.toUpperCase(),
         headers: {
             'Content-Type': 'application/json',
             ...opts.headers,
         },
-        body: JSON.stringify(opts.body),
         signal,
         ...overloadOpts,
+        body: isGet ? undefined : JSON.stringify(opts.body),
     })
         .then((response) => {
         // 获取 Content-Type 头部信息
@@ -119,20 +133,22 @@ class Query {
      */
     async post(body, options) {
         const url = options?.url || this.url;
-        const headers = { ...this.headers, ...options?.headers };
-        const adapter = options?.adapter || this.adapter;
-        const beforeRequest = options?.beforeRequest || this.beforeRequest;
-        const afterResponse = options?.afterResponse || this.afterResponse;
-        const timeout = options?.timeout || this.timeout;
+        const { headers, adapter, beforeRequest, afterResponse, timeout, ...rest } = options || {};
+        const _headers = { ...this.headers, ...headers };
+        const _adapter = adapter || this.adapter;
+        const _beforeRequest = beforeRequest || this.beforeRequest;
+        const _afterResponse = afterResponse || this.afterResponse;
+        const _timeout = timeout || this.timeout;
         const req = {
             url: url,
-            headers: headers,
+            headers: _headers,
             body,
-            timeout,
+            timeout: _timeout,
+            ...rest,
         };
         try {
-            if (beforeRequest) {
-                await beforeRequest(req);
+            if (_beforeRequest) {
+                await _beforeRequest(req);
             }
         }
         catch (e) {
@@ -160,11 +176,11 @@ class Query {
                 }, 1000);
             });
         }
-        return adapter(req).then(async (res) => {
+        return _adapter(req).then(async (res) => {
             try {
                 setBaseResponse(res);
-                if (afterResponse) {
-                    return await afterResponse(res, {
+                if (_afterResponse) {
+                    return await _afterResponse(res, {
                         req,
                         res,
                         fetch: adapter,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kevisual/query",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -9,6 +9,7 @@
   "scripts": {
     "build": "npm run clean && rollup -c",
     "build:app": "npm run build && rsync dist/* ../deploy/dist",
+    "dev:lib": "rollup -c -w",
     "clean": "rm -rf dist"
   },
   "files": [