{"id":20725393,"url":"https://github.com/attojs/vue-request-docs-en","last_synced_at":"2026-03-17T00:34:13.115Z","repository":{"id":118726731,"uuid":"368816053","full_name":"AttoJS/vue-request-docs-en","owner":"AttoJS","description":null,"archived":false,"fork":false,"pushed_at":"2021-09-10T07:40:07.000Z","size":3897,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-17T23:29:21.737Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AttoJS.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2021-05-19T09:35:36.000Z","updated_at":"2021-09-10T07:40:10.000Z","dependencies_parsed_at":"2023-07-19T12:33:06.734Z","dependency_job_id":null,"html_url":"https://github.com/AttoJS/vue-request-docs-en","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/AttoJS%2Fvue-request-docs-en","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AttoJS%2Fvue-request-docs-en/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AttoJS%2Fvue-request-docs-en/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AttoJS%2Fvue-request-docs-en/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AttoJS","download_url":"https://codeload.github.com/AttoJS/vue-request-docs-en/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243004098,"owners_count":20220236,"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":[],"created_at":"2024-11-17T04:18:45.337Z","updated_at":"2025-12-25T00:03:55.784Z","avatar_url":"https://github.com/AttoJS.png","language":"HTML","funding_links":[],"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⚡️ 一个能轻松帮你管理请求状态（支持SWR，轮询，错误重试，缓存，分页等）的 Vue 3 composition API 请求库\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/latest\" 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## 为什么选择 VueRequest\n\n在以往的业务项目中，常常被 loading 状态的管理、请求的节流防抖、接口数据的缓存、分页等这些重复的实现所困惑。每当开启一个新项目时，我们都得手动去处理以上这些问题，这将是一个重复性的工作，而且还得确保团队的一致。\n\nVueRequest 旨在为开发者提供便捷、快速的方式来管理接口的状态。在业务开发中省去上述的那些“脏活累活”，只需要简单的配置即可使用，专注于业务核心的开发。\n\n## 特性\n\n- 🚀 \u0026nbsp;所有数据都具有响应式\n- 🔄 \u0026nbsp;轮询请求\n- 🤖 \u0026nbsp;自动处理错误重试\n- 🗄 \u0026nbsp;内置请求缓存\n- 💧 \u0026nbsp;节流请求与防抖请求\n- 🎯 \u0026nbsp;聚焦页面时自动重新请求\n- ⚙️ \u0026nbsp;强大的分页扩展以及加载更多扩展\n- 📠 \u0026nbsp;完全使用 Typescript 编写，具有强大的类型提示\n- ⚡️ \u0026nbsp;兼容 Vite\n- 🍃 \u0026nbsp;轻量化\n- 📦 \u0026nbsp;开箱即用\n\n## 文档\n\n- [English](https://www.attojs.org/)\n- [中文文档](https://www.attojs.com/)\n\n## 安装\n\n你可以通过 [NPM](https://www.npmjs.com/)、[YARN](https://yarnpkg.com/) 或者通过 `\u003cscript\u003e` 的方式引入 [unpkg.com](https://unpkg.com/) 上的包。\n\n### NPM\n\n```sh\nnpm install vue-request\n# or\nyarn add vue-request\n```\n\n### CDN\n\n\u003e 对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏。\n\n```html\n\u003cscript src=\"https://unpkg.com/vue-request/dist/vue-request.min.js\"\u003e\u003c/script\u003e\n```\n\n一旦你在页面中添加了它，你就可以在 `window.VueRequest` 中访问我们导出的方法。\n\n## 示例\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\"\u003e\nimport { defineComponent } from 'vue';\nexport default defineComponent({\n  setup() {\n    const { data, loading, error } = useRequest(service);\n\n    return {\n      data,\n      loading,\n      error,\n    };\n  },\n});\n\u003c/script\u003e\n```\n\n在这个例子中，`useRequest` 接收了一个 `service` 函数。`service`是一个异步的请求函数，换句话说，你可以使用 **axios** 来获取数据，然后返回一个 **Promise**。更具体的说明可以在[文档](https://www.attojs.com/guide/documentation/dataFetching.html)中查看。\n\n`useRequest` 还返回了三个值， `data`、`loading` 和 `error`。当请求还没完成时, `data` 将会为 `undefined` 同时，`loading` 将被设置为 `true`。当请求完成后，则将会根据请求结果来设定 `data` 和 `error`，并对页面进行渲染。这是因为 `data`、 `loading` 和 `error` 是 Vue 的 [响应式引用(Refs)](https://v3.cn.vuejs.org/guide/reactivity-fundamentals.html)，它们的值将根据请求状态及请求结果来修改。\n\n## 一些很酷的特性\n\nVueRequest 有非常多的特性，如 错误重试、缓存、分页、节流、防抖...，这里列举两个个比较酷的特性\n\n### 1.聚焦页面时自动重新请求\n\n有些时候，你要确保多个浏览器窗口之间数据的一致性；又或者是当用户电脑在休眠状态重新激活后，页面的数据需要同步到最新状态时。`refreshOnWindowFocus` 可能会为你节省很多逻辑代码。[点击这里直达文档](https://www.attojs.com/guide/documentation/refreshOnWindowFocus.html)\n\n```ts\nconst { data, error, run } = useRequest(getUserInfo, {\n  refreshOnWindowFocus: true,\n  refocusTimespan: 1000, // 请求间隔时间\n});\n```\n\n![vue-request](https://z3.ax1x.com/2021/09/10/hXAs8s.gif)\n\n### 2.轮询数据\n\n有些时候，你要确保多个设备间数据的同步更新。这时候可以用我们提供的 `pollingInterval` 来定期重新请求接口，这样就可以保证多设备间的数据一致性。当用户进行修改数据时，两个窗口将会实时同步更新。[点击这里直达文档](https://www.attojs.com/guide/documentation/polling.htm)\n\n```ts\nconst { data, error, run } = useRequest(getUserInfo, {\n  pollingInterval: 1000, // 请求间隔时间\n});\n```\n\n![vue-request](https://z3.ax1x.com/2021/09/10/hXAy2n.gif)\n\n## TODO 列表\n\n如果你有很酷的想法，欢迎提交 issue 以便我们讨论\n\n- [ ] 支持 Vue 2\n- [x] 文档\n- [x] 分页\n- [x] 加载更多\n\n## 致谢\n\n感谢他们为我们提供了灵感\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-docs-en","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fattojs%2Fvue-request-docs-en","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fattojs%2Fvue-request-docs-en/lists"}