{"id":17856850,"url":"https://github.com/attojs/vue-request","last_synced_at":"2025-05-13T23:08:57.387Z","repository":{"id":38362418,"uuid":"305648514","full_name":"AttoJS/vue-request","owner":"AttoJS","description":"⚡️ This is a library that can easily help you manage request states, supporting common features such as SWR, polling, error retry, caching, and pagination, etc. ⚡️ 这是一个能够轻松帮助你管理请求状态的库，支持 SWR、轮询、错误重试、缓存、分页等常用功能。","archived":false,"fork":false,"pushed_at":"2025-03-14T01:57:35.000Z","size":1939,"stargazers_count":1362,"open_issues_count":39,"forks_count":92,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-05-09T01:06:02.901Z","etag":null,"topics":["axios","composition-api","swr","userequest","vue","vue-request","vue3","vuerequest"],"latest_commit_sha":null,"homepage":"https://www.attojs.com","language":"TypeScript","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/AttoJS.png","metadata":{"files":{"readme":"README-en_US.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":"john60676","tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":["https://www.attojs.com/sponsor","https://paypal.me/john60676"]}},"created_at":"2020-10-20T08:57:40.000Z","updated_at":"2025-05-06T16:10:49.000Z","dependencies_parsed_at":"2024-06-18T12:32:31.996Z","dependency_job_id":"7c3518a8-d32c-43c7-aea8-cb27da839fe2","html_url":"https://github.com/AttoJS/vue-request","commit_stats":{"total_commits":424,"total_committers":7,"mean_commits":60.57142857142857,"dds":0.1910377358490566,"last_synced_commit":"e64e31e20dd6e0fc3d0dc5855bd26f9f0dee6615"},"previous_names":[],"tags_count":33,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AttoJS%2Fvue-request","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AttoJS%2Fvue-request/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AttoJS%2Fvue-request/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AttoJS%2Fvue-request/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AttoJS","download_url":"https://codeload.github.com/AttoJS/vue-request/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254041912,"owners_count":22004802,"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":["axios","composition-api","swr","userequest","vue","vue-request","vue3","vuerequest"],"created_at":"2024-10-28T03:10:03.905Z","updated_at":"2025-05-13T23:08:52.354Z","avatar_url":"https://github.com/AttoJS.png","language":"TypeScript","funding_links":["https://ko-fi.com/john60676","https://www.attojs.com/sponsor","https://paypal.me/john60676"],"categories":[],"sub_categories":[],"readme":"English | [简体中文](README.md)\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.attojs.com\"\u003e\n    \u003cimg\n      width=\"150\"\n      src=\"https://raw.githubusercontent.com/AttoJS/art/master/vue-request-logo.png\"\n      alt=\"VueRequest logo\"\n    /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003ch1 align=\"center\"\u003eVueRequest\u003c/h1\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003cp align=\"center\"\u003e⚡️ This is a library that can easily help you manage request states, supporting common features such as SWR, polling, error retry, caching, and pagination, etc.\u003c/p\u003e\n   \u003ca href=\"https://codecov.io/github/attojs/vue-request?branch=master\"\u003e\n    \u003cimg\n      src=\"https://img.shields.io/codecov/c/github/attojs/vue-request?token=NW2XVQWGPP\"\n      alt=\"Coverage Status\"\n    /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vue-request\"\u003e\n    \u003cimg src=\"https://img.shields.io/bundlephobia/minzip/vue-request\" alt=\"Size\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vue-request\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/vue-request\" alt=\"Version\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vue-request\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/languages/top/attojs/vue-request\" alt=\"Languages\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vue-request\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/l/vue-request\" alt=\"License\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/AttoJS/vue-request/stargazers\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/stars/attojs/vue-request\" alt=\"Star\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vue-request\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dm/vue-request\" alt=\"Download\" /\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n## Why VueRequest\n\nIn past projects, we were often troubled by the repetitive implementation of loading state management, request throttling and debouncing, API data caching, pagination, etc. Every time we started a new project, we had to handle these issues manually, which was a repetitive task that also required ensuring team consistency.\n\nVueRequest is designed to provide developers with a convenient and fast way to manage API states. By simply configuring it, you can eliminate the tedious tasks and focus on core development.\n\n## Features\n\n- 🌈 \u0026nbsp;Support Vue 2 \u0026 3\n- 🚀 \u0026nbsp;All data is reactive\n- 🔄 \u0026nbsp;Interval polling\n- 🤖 \u0026nbsp;Automatic error retry\n- 🗄 \u0026nbsp;Built-in cache\n- 💧 \u0026nbsp;Throttle and Debounce\n- ⚙️ \u0026nbsp;Powerful pagination extension and load more extensions\n- 📠 \u0026nbsp;Written in TypeScript\n- ⚡️ \u0026nbsp;Compatible with Vite\n- 🍃 \u0026nbsp;Lightweight\n- 📦 \u0026nbsp;Out of the box\n\n## Documentation\n\n- [English](https://en.attojs.com/)\n- [中文文档](https://www.attojs.com/)\n\n## Install\n\nYou can install VueRequest with [NPM](https://www.npmjs.com/), [YARN](https://yarnpkg.com/), or a `\u003cscript\u003e` via [unpkg.com](https://unpkg.com/)\n\n### NPM\n\n```sh\nnpm install vue-request\n# or\nyarn add vue-request\n# or\npnpm install vue-request\n```\n\n### CDN\n\n\u003e For production environments, we recommend linking to a specific version and build file to avoid unexpected breaking changes caused by new versions.\n\n```html\n\u003cscript src=\"https://unpkg.com/vue-request/dist/vue-request.min.js\"\u003e\u003c/script\u003e\n```\n\nOnce you add it to your page, you can access our exported methods in `window.VueRequest`.\n\n## Usage\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cdiv v-if=\"loading\"\u003eloading...\u003c/div\u003e\n    \u003cdiv v-if=\"error\"\u003efailed to fetch\u003c/div\u003e\n    \u003cdiv v-if=\"data\"\u003eHey! {{ data }}\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript lang=\"ts\" setup\u003e\nconst { data, loading, error } = useRequest(service);\n\u003c/script\u003e\n```\n\nIn this example, `useRequest` receives a `service` function. `service` is an asynchronous request function, which means you can use **axios** to retrieve data and return a **Promise**. More specific details can be found in the [documentation](https://www.attojs.com/guide/documentation/dataFetching.html).\n\nThe `useRequest` function also returns three values: `data`, `loading`, and `error`. While the request is still in progress, `data` will be set to `undefined` and `loading` will be `true`. Once the request is completed, `data` and `error` will be set based on the result, and the page will be rendered accordingly. This is because `data`, `loading`, and `error` are [Reactivity(Refs)](https://vuejs.org/guide/essentials/reactivity-fundamentals.html) in Vue, and their values will be updated based on the request status and result.\n\n## Some of the coolest features:\n\nVueRequest provides many features, such as error retry, caching, pagination, throttling, debouncing, and more. Here are two particularly cool features:\n\n### 1.Refresh On Focus\n\nSometimes, you need to ensure data consistency across multiple browser windows or synchronize page data to the latest state when a user's computer resumes from sleep mode. Using `refreshOnWindowFocus` can save you a lot of logic code. [Click here to go to the document](https://www.attojs.com/guide/documentation/refreshOnWindowFocus.html)\n\n```ts\nconst { data, error, run } = useRequest(getUserInfo, {\n  refreshOnWindowFocus: true,\n  refocusTimespan: 1000, // refresh interval 1s\n});\n```\n\n![vue-request](https://z3.ax1x.com/2021/09/10/hXAs8s.gif)\n\n### 2.Polling Data\n\nSometimes, you need to ensure data synchronization across multiple devices. In this case, you can use `pollingInterval` provided by us to periodically re-request the API, ensuring data consistency across multiple devices. When a user modifies the data, the changes will be synced in real-time between two windows. [Click here to go to the document](https://www.attojs.com/guide/documentation/polling.html)\n\n```ts\nconst { data, error, run } = useRequest(getUserInfo, {\n  pollingInterval: 1000, // polling interval 1s\n});\n```\n\n![vue-request](https://z3.ax1x.com/2021/09/10/hXAy2n.gif)\n\n## Thanks\n\nThank them for inspiring us.\n\n- [vercel/swr](https://github.com/vercel/swr)\n- [alibaba/hooks](https://ahooks.js.org/hooks/async#userequest)\n\n## License\n\n[MIT License](https://github.com/AttoJS/vue-request/blob/master/LICENSE) © 2020-present [AttoJS](https://github.com/AttoJS)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fattojs%2Fvue-request","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fattojs%2Fvue-request","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fattojs%2Fvue-request/lists"}