{"id":20105936,"url":"https://github.com/markthree/tob-use-wrap","last_synced_at":"2026-04-16T17:36:02.641Z","repository":{"id":57377532,"uuid":"451450488","full_name":"markthree/tob-use-wrap","owner":"markthree","description":"可以将通用的 uniapp-api 转换为 composition-api 的工具","archived":false,"fork":false,"pushed_at":"2024-02-28T08:52:06.000Z","size":11,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-02-14T01:47:51.417Z","etag":null,"topics":["composition-api","uniapp","vue"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/markthree.png","metadata":{"files":{"readme":"readme.md","changelog":"changelog.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-01-24T12:13:27.000Z","updated_at":"2022-01-29T08:21:40.000Z","dependencies_parsed_at":"2024-11-13T17:48:45.436Z","dependency_job_id":null,"html_url":"https://github.com/markthree/tob-use-wrap","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markthree%2Ftob-use-wrap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markthree%2Ftob-use-wrap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markthree%2Ftob-use-wrap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markthree%2Ftob-use-wrap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/markthree","download_url":"https://codeload.github.com/markthree/tob-use-wrap/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241549089,"owners_count":19980475,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["composition-api","uniapp","vue"],"created_at":"2024-11-13T17:48:40.190Z","updated_at":"2025-10-17T18:19:00.606Z","avatar_url":"https://github.com/markthree.png","language":"JavaScript","readme":"# tob-use-wrap\n\n可以将通用的 `uniapp-api` 转换为 `composition-api` 的工具\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## 动机 🐗\n\n在开发过程中，`uniapp-api` 的回调形式在 `vue3` 可以用更加简洁的方式来表达，同时赋予更灵活的操作。\n\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## 规则 🦕\n\n只要需要 `success`, `fail`, `complete` 的 `uniapp-api` 就可以转换为更简单的 `composition-api`。\n\n- `success` 的结果会被设置到 `result.value`  \n- `fail` 的结果会被设置到 `error.value`\n- 函数的执行加载状态将被设置到 `loading.vue` \n\n例如 `uni.request`\n```js\n// 原生\nuni.request({\n    url: '...',\n    data: {\n        name: '张三',\n        age: 18\n    },\n    success(data) {\n        console.log(data) // 数据\n    },\n    fail(error) {\n        console.log(error) // 错误\n    },\n    complete() {\n        console.log(false) // loading 结束\n    }\n})\n\n// 现在\nconst { result, error, loading } = useRequest({\n    url: '...',\n    data: {\n        name: '张三',\n        age: 18\n    }\n})\n```\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## 例子 🐸\n\n### 1. useRequest\n\n```js\n// composables/request.js\nimport { $U } from \"@/uni_modules/tob-use-wrap/index.js\"\n\nexport const useRequest = $U(uni.request)\n``` \n\n```html\n\u003c!-- 页面中 --\u003e\n\u003ctemplate\u003e\n    \u003cview\u003e\n       \u003cview\u003e数据结果: {{result}}\u003c/view\u003e\n       \u003cview\u003e加载状态: {{loading}}\u003c/view\u003e\n       \u003cview\u003e错误信息: {{error}}\u003c/view\u003e\n    \u003c/view\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { useRequest } from \"@/composables/request.js\"\nexport default {\n    setup() {\n        const { result, loading, error } = useRequest({\n            url: '...',\n            data: {\n                age: 18,\n                name: '张三'\n            }\n        })\n\n        return {\n            result, // 数据结果\n            error, // 错误信息\n            loading // 加载状态\n        }\n    }\n}\n\u003c/script\u003e\n```\n\n\u003cbr /\u003e\n\n### 2. useUploadFile\n\n```js\n// composables/uploadFile.js\nimport { watch } from \"vue\"\nimport { $U } from \"@/uni_modules/tob-use-wrap/index.js\"\n\nexport const useUploadFile = $U(uni.uploadFile)\n``` \n\n```html\n\u003c!-- 页面中 --\u003e\n\u003ctemplate\u003e\n    \u003cview\u003e\n       \u003cview\u003e上传结果: {{result}}\u003c/view\u003e\n       \u003cview\u003e加载状态: {{loading}}\u003c/view\u003e\n       \u003cview\u003e错误信息: {{error}}\u003c/view\u003e\n    \u003c/view\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { useUploadFile } from \"@/composables/uploadFile.js\"\nexport default {\n    setup() {\n        const { result, loading, error } = useUploadFile({\n            url: '...',\n            filePath: '...'\n        })\n\n        return {\n            result, // 上传结果\n            error, // 错误信息\n            loading // 加载状态\n        }\n    }\n}\n\u003c/script\u003e\n```\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## 组织 🦔\n\n欢迎关注 **帝莎编程**\n- [官网](http://dishaxy.dishait.cn/)\n- [Gitee](https://gitee.com/dishait)\n\n- [Github](https://github.com/dishait)\n\n- [网易云课堂](https://study.163.com/provider/480000001892585/index.htm?share=2\u0026shareId=480000001892585)\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n\n## 插件市场\n\n👉 [传送门](https://ext.dcloud.net.cn/plugin?id=7318)\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## License\n\nMade with markthree\n\nPublished under [MIT License](./LICENSE).\n\n\u003cbr /\u003e","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkthree%2Ftob-use-wrap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarkthree%2Ftob-use-wrap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkthree%2Ftob-use-wrap/lists"}