From 54ee3c3c5de6c3c4222dcf11ddc60d04fd70e1b2 Mon Sep 17 00:00:00 2001 From: haoziqaq <357229046@qq.com> Date: Thu, 6 Jul 2023 12:31:32 +0800 Subject: [PATCH] feat: support abort and progress --- package.json | 5 ++- playground/package.json | 3 +- playground/pnpm-lock.yaml | 16 ++++++++ playground/public/logo.png | Bin 0 -> 15010 bytes playground/src/App.vue | 24 ++++++++++- playground/src/apis/index.ts | 9 +++++ playground/src/request/index.ts | 2 +- playground/src/server.js | 2 +- pnpm-lock.yaml | 42 +++++++++---------- src/use.ts | 69 +++++++++++++++++++++++--------- 10 files changed, 126 insertions(+), 46 deletions(-) create mode 100644 playground/public/logo.png diff --git a/package.json b/package.json index ec7722b..fe91c26 100644 --- a/package.json +++ b/package.json @@ -44,7 +44,10 @@ "@varlet/cli": "^2.11.8", "rimraf": "^5.0.1", "typescript": "^5.1.5", - "vue": "^3.3.4" + "vue": "3.3.4" + }, + "peerDependencies": { + "vue": "^3.2.0" }, "repository": { "type": "git", diff --git a/playground/package.json b/playground/package.json index eebbb61..09488fc 100644 --- a/playground/package.json +++ b/playground/package.json @@ -12,9 +12,10 @@ "@varlet/axle": "link:..", "@varlet/touch-emulator": "2.11.8", "@varlet/ui": "^2.11.8", + "@varlet/use": "^2.12.2", "koa": "^2.14.2", - "koa-router": "^12.0.0", "koa-bodyparser": "^4.4.0", + "koa-router": "^12.0.0", "nodemon": "^2.0.15", "unplugin-auto-import": "^0.16.2", "vue": "^3.3.1" diff --git a/playground/pnpm-lock.yaml b/playground/pnpm-lock.yaml index 8224367..83809fd 100644 --- a/playground/pnpm-lock.yaml +++ b/playground/pnpm-lock.yaml @@ -14,6 +14,9 @@ dependencies: '@varlet/ui': specifier: ^2.11.8 version: 2.11.8(vue@3.3.1) + '@varlet/use': + specifier: ^2.12.2 + version: 2.12.2(vue@3.3.1) koa: specifier: ^2.14.2 version: 2.14.2 @@ -353,6 +356,10 @@ packages: resolution: {integrity: sha512-PukW5LrzUyUvIkwqHsytaMZZYVv9P33BCG6fRGgQLS9I+JjJTf/VVo17HjEb3h23IDvqFpgE3034BOtiX1zCYg==} dev: false + /@varlet/shared@2.12.2: + resolution: {integrity: sha512-LSABYZJCZLQHGuC7RmhK7WaChpcWI9HIriQTLLshbflNYB/I+YxAFA7a2MrJndnaN90iCFFIYITwtY3nnDkyBg==} + dev: false + /@varlet/touch-emulator@2.11.8: resolution: {integrity: sha512-yxdVHsZsz/GwtMXsrHTC7hE4UxsWhRkPlJAXKMW55XJpvZHVbxdmdgiyryBlCBtj+BXfqH5f4cGXusccvznzAw==} dev: false @@ -380,6 +387,15 @@ packages: vue: 3.3.1 dev: false + /@varlet/use@2.12.2(vue@3.3.1): + resolution: {integrity: sha512-wDRZ/8UpTscWY/5cJ+2o6qSvl4FiECJoaLpHTK8WZC92j/zUwPJYY6vDIbImsROJW0SN9Ob4zVKJTjTqXC9Rrw==} + peerDependencies: + vue: ^3.2.0 + dependencies: + '@varlet/shared': 2.12.2 + vue: 3.3.1 + dev: false + /@vitejs/plugin-vue@4.2.3(vite@4.3.8)(vue@3.3.1): resolution: {integrity: sha512-R6JDUfiZbJA9cMiguQ7jxALsgiprjBeHL5ikpXfJCH62pPHtI+JdJ5xWj6Ev73yXSlYl86+blXn1kZHQ7uElxw==} engines: {node: ^14.18.0 || >=16.0.0} diff --git a/playground/public/logo.png b/playground/public/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..25473816d25ce1fb0fd010625de2c2203c7de17c GIT binary patch literal 15010 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[], { immediate: true }) -const [user, apiGetUser, { loading: isUserLoading }] = useApiGetUser({}) +const [user, apiGetUser, { loading: isUserLoading, abort }] = useApiGetUser( + {}, + { + onSuccess(response) { + if (response.code === 200) { + Snackbar.success('Getting Success!') + } + }, + } +) const [addedUser, apiAddUser] = useApiAddUser( {}, { @@ -66,6 +76,9 @@ const [deletedUser, apiDeleteUser] = useApiDeleteUser( }, } ) +const [file, apiDownloadFile, { downloadProgress }] = useApiDownloadFile(null, { + onTransform: (response) => response, +}) const userRecord = reactive({ id: '', @@ -100,6 +113,7 @@ watch( Search + Abort name: getUser @@ -125,4 +139,12 @@ watch( Delete + + + + +

Download Progress: {{ downloadProgress * 100 }} %

+

File Size: {{ file?.size ?? 0 }}

+ Download (PS: Please use slow 3G) + diff --git a/playground/src/apis/index.ts b/playground/src/apis/index.ts index 20236ea..3f3bae5 100644 --- a/playground/src/apis/index.ts +++ b/playground/src/apis/index.ts @@ -67,3 +67,12 @@ export function useApiPatchUser(data: D, options?: Options> ...options, }) } + +export function useApiDownloadFile(data: D, options?: Options) { + return useAxle({ + data, + url: 'http://localhost:5173/logo.png', + runner: axle.getBlob, + ...options, + }) +} \ No newline at end of file diff --git a/playground/src/request/index.ts b/playground/src/request/index.ts index 276dd0e..332fef3 100644 --- a/playground/src/request/index.ts +++ b/playground/src/request/index.ts @@ -11,7 +11,7 @@ const useAxle = createUseAxle({ axle.axios.interceptors.response.use( (response) => { - if (response.data.code !== 200) { + if (response.data.code !== 200 && response.data.message) { Snackbar.warning(response.data.message) } diff --git a/playground/src/server.js b/playground/src/server.js index 3019163..74da818 100644 --- a/playground/src/server.js +++ b/playground/src/server.js @@ -42,7 +42,7 @@ router.get('/user/list-user', async (ctx) => { }) router.get('/user/get-user', async (ctx) => { - await delay(300) + await delay(2000) const user = users.find((user) => user.id === Number(ctx.request.query.id)) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4c99175..a5f320e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -20,8 +20,8 @@ devDependencies: specifier: ^6.9.7 version: 6.9.7 '@varlet/cli': - specifier: ^2.11.1 - version: 2.11.1(@varlet/icons@2.11.1)(@varlet/touch-emulator@2.11.1)(@vue/runtime-core@3.2.47)(@vue/test-utils@2.3.2)(clipboard@2.0.11)(live-server@1.2.2)(lodash-es@4.17.21)(vue-router@4.2.0)(vue@3.3.4) + specifier: ^2.11.8 + version: 2.11.8(@varlet/icons@2.11.8)(@varlet/touch-emulator@2.11.8)(@vue/runtime-core@3.2.47)(@vue/test-utils@2.3.2)(clipboard@2.0.11)(live-server@1.2.2)(lodash-es@4.17.21)(vue-router@4.2.0)(vue@3.3.4) rimraf: specifier: ^5.0.1 version: 5.0.1 @@ -29,7 +29,7 @@ devDependencies: specifier: ^5.1.5 version: 5.1.5 vue: - specifier: ^3.3.4 + specifier: 3.3.4 version: 3.3.4 packages: @@ -1773,6 +1773,7 @@ packages: /@sinonjs/fake-timers@10.2.0: resolution: {integrity: sha512-OPwQlEdg40HAj5KNF8WW6q2KG4Z+cBCZb3m4ninfTZKaBmbIJodviQsDBoYMPHkOyJJMHnOJo5j2+LKDOhOACg==} + deprecated: Use version 10.1.0. Version 10.2.0 has potential breaking issues dependencies: '@sinonjs/commons': 3.0.0 dev: true @@ -1898,13 +1899,13 @@ packages: '@types/yargs-parser': 21.0.0 dev: true - /@varlet/cli@2.11.1(@varlet/icons@2.11.1)(@varlet/touch-emulator@2.11.1)(@vue/runtime-core@3.2.47)(@vue/test-utils@2.3.2)(clipboard@2.0.11)(live-server@1.2.2)(lodash-es@4.17.21)(vue-router@4.2.0)(vue@3.3.4): - resolution: {integrity: sha512-0wNFCDytAoJu4wsPW9OeoQMPrblWwMOETyZ6m1Tof+HBg285h69x3dvd51kuI7hBs6Ee3NUtl5E4VQ64tmCq7w==} + /@varlet/cli@2.11.8(@varlet/icons@2.11.8)(@varlet/touch-emulator@2.11.8)(@vue/runtime-core@3.2.47)(@vue/test-utils@2.3.2)(clipboard@2.0.11)(live-server@1.2.2)(lodash-es@4.17.21)(vue-router@4.2.0)(vue@3.3.4): + resolution: {integrity: sha512-a8HqNkGNhTvXEQ33+96t1+jFJmCReoZg0j4sy2Lgvks+kUPtV9Lv6J2sZOcwUQsanYKOcy2J0sf82tQ5hjARsg==} engines: {node: ^14.18.0 || >=16.0.0} hasBin: true peerDependencies: - '@varlet/icons': 2.11.1 - '@varlet/touch-emulator': 2.11.1 + '@varlet/icons': 2.11.8 + '@varlet/touch-emulator': 2.11.8 '@vue/runtime-core': 3.2.47 '@vue/test-utils': 2.3.2 clipboard: ^2.0.6 @@ -1918,10 +1919,10 @@ packages: '@babel/plugin-transform-typescript': 7.21.3(@babel/core@7.21.8) '@babel/preset-env': 7.18.6(@babel/core@7.21.8) '@babel/preset-typescript': 7.18.6(@babel/core@7.21.8) - '@varlet/icons': 2.11.1 - '@varlet/shared': 2.11.1 - '@varlet/touch-emulator': 2.11.1 - '@varlet/vite-plugins': 2.11.1 + '@varlet/icons': 2.11.8 + '@varlet/shared': 2.11.8 + '@varlet/touch-emulator': 2.11.8 + '@varlet/vite-plugins': 2.11.8 '@vitejs/plugin-vue': 4.2.2(vite@4.3.5)(vue@3.3.4) '@vitejs/plugin-vue-jsx': 3.0.1(vite@4.3.5)(vue@3.3.4) '@vue/babel-plugin-jsx': 1.1.1(@babel/core@7.21.8) @@ -1970,26 +1971,21 @@ packages: - utf-8-validate dev: true - /@varlet/icons@2.11.1: - resolution: {integrity: sha512-J/etC9Sc+M+1jZJDQje3fB20KUeweXuIKxR+BMHfSZmDaeMEf7o3ATStQp2CWJxTSJE9FC5VtEgVaXEwkBK4cg==} - dev: true - - /@varlet/shared@2.11.1: - resolution: {integrity: sha512-QAPtVWtIuZwy0+TPGc7wzVLo6aghiMXayAkFtcJXooIzEaNXOTF69Xljf9UR2gvMYSPiyZDylPf5dRsEepFiJQ==} + /@varlet/icons@2.11.8: + resolution: {integrity: sha512-LbpzNzPjlZR8O4niz5Vf6DHiVuaaa7GHYnKE/0K13hQ+YraV4bGzVriM1vNVXtSzLEphYrUjnG+c0znnR7XgkA==} dev: true /@varlet/shared@2.11.8: resolution: {integrity: sha512-PukW5LrzUyUvIkwqHsytaMZZYVv9P33BCG6fRGgQLS9I+JjJTf/VVo17HjEb3h23IDvqFpgE3034BOtiX1zCYg==} - dev: false - /@varlet/touch-emulator@2.11.1: - resolution: {integrity: sha512-qQ8b4NTU0icAr8FpWnjj9JQVfy6gasG7fAP90OeIC4J8TtkuikX8emdAt5ulgluLwsHnTtbmnbez4fULDAY8Tg==} + /@varlet/touch-emulator@2.11.8: + resolution: {integrity: sha512-yxdVHsZsz/GwtMXsrHTC7hE4UxsWhRkPlJAXKMW55XJpvZHVbxdmdgiyryBlCBtj+BXfqH5f4cGXusccvznzAw==} dev: true - /@varlet/vite-plugins@2.11.1: - resolution: {integrity: sha512-IuvcbxCnL594EMYmoFxw28iMsmrC7QCXOdrYhF99Sfl3tGhSGj8Af7Oc7JBCHFybZczp8RahS/PZzqTMFgm6Vg==} + /@varlet/vite-plugins@2.11.8: + resolution: {integrity: sha512-rmpOxp2WwnPSS8KkAmBomUgfgSz5E9KltNUKzN6lzrSuCOseH0WjcU+/4gqtpxWSQrhmMiOp595zoGbsk4ZHVQ==} dependencies: - '@varlet/shared': 2.11.1 + '@varlet/shared': 2.11.8 ejs: 3.1.8 fs-extra: 9.1.0 highlight.js: 10.7.3 diff --git a/src/use.ts b/src/use.ts index b65f882..25dfdae 100644 --- a/src/use.ts +++ b/src/use.ts @@ -1,4 +1,4 @@ -import { ref, type Ref, type UnwrapRef } from 'vue' +import { ref, type Ref } from 'vue' import { type AxleRequestConfig, createFetchHelper, createModifyHelper } from './instance.js' export interface RunOptions

{ @@ -7,7 +7,7 @@ export interface RunOptions

{ config?: AxleRequestConfig } -export type Run = (options?: RunOptions

) => Promise> +export type Run = (options?: RunOptions

) => Promise export interface UseAxleOptions> { url: string @@ -18,17 +18,20 @@ export interface UseAxleOptions> { immediate?: boolean onBefore?(): void onAfter?(): void - onTransform?(response: UnwrapRef, prev: UnwrapRef): UnwrapRef - onSuccess?(response: UnwrapRef): void + onTransform?(response: R, prev: D): D + onSuccess?(response: R): void onError?(error: Error): void } export type UseAxleReturn = [ - data: Ref>, + data: Ref, run: Run, extra: { - loading: Ref> - error: Ref> + uploadProgress: Ref + downloadProgress: Ref + loading: Ref + error: Ref + abort(): void } ] @@ -38,10 +41,8 @@ export interface CreateUseAxleOptions { export function createUseAxle(options: CreateUseAxleOptions = {}) { const { onTransform: defaultOnTransform } = options - - const useAxle = >( - options: UseAxleOptions - ): UseAxleReturn => { + + const useAxle = >(options: UseAxleOptions) => { const { url, runner, @@ -51,28 +52,57 @@ export function createUseAxle(options: CreateUseAxleOptions = {}) { config: initialConfig, onBefore = () => {}, onAfter = () => {}, - onTransform = (defaultOnTransform as UseAxleOptions['onTransform']) ?? ((response) => response as unknown as UnwrapRef), + onTransform = (defaultOnTransform as UseAxleOptions['onTransform']) ?? + ((response) => response as unknown as D), onSuccess = () => {}, onError = () => {}, } = options + const initialUrl = url - const data = ref(initialData) + const data = ref(initialData) as Ref const loading = ref(false) const error = ref() + const downloadProgress = ref(0) + const uploadProgress = ref(0) + + let controller = new AbortController() + + const abort = () => { + controller.abort() + } + + const run: Run = (options: RunOptions

= {}) => { + if (controller.signal.aborted) { + controller = new AbortController() + } + + uploadProgress.value = 0 + downloadProgress.value = 0 - const run: Run = (options: RunOptions

= {}): Promise> => { const url = options.url ?? initialUrl onBefore() loading.value = true - return runner(url, options.params, options.config) + return runner(url, options.params, { + signal: controller.signal, + + onUploadProgress(event) { + uploadProgress.value = event.progress ?? 0 + }, + + onDownloadProgress(event) { + downloadProgress.value = event.progress ?? 0 + }, + + ...options.config, + }) .then((response) => { - data.value = onTransform(response as UnwrapRef, data.value) + data.value = onTransform(response as R, data.value) error.value = undefined - onSuccess(response as UnwrapRef) + onSuccess(response as R) return data.value }) @@ -103,8 +133,11 @@ export function createUseAxle(options: CreateUseAxleOptions = {}) { { loading, error, + uploadProgress, + downloadProgress, + abort, }, - ] + ] as UseAxleReturn } return useAxle