{"id":31970664,"url":"https://github.com/winjs-dev/winjs-plugin-request","last_synced_at":"2025-10-14T19:18:05.329Z","repository":{"id":309510664,"uuid":"1036529831","full_name":"winjs-dev/winjs-plugin-request","owner":"winjs-dev","description":"The HTTP request plug-in of WinJS framework is based on axios and vue-hooks-plus, providing strong request processing capabilities and Vue 3 Composition API support.","archived":false,"fork":false,"pushed_at":"2025-10-01T03:11:41.000Z","size":537,"stargazers_count":1,"open_issues_count":3,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-01T05:28:01.654Z","etag":null,"topics":["axios","http","plugin","request","userequest","vue-hooks-plus","winjs"],"latest_commit_sha":null,"homepage":"https://winjs-dev.github.io/winjs-docs/plugins/request","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/winjs-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-08-12T07:57:32.000Z","updated_at":"2025-09-15T05:41:44.000Z","dependencies_parsed_at":"2025-10-01T05:29:40.357Z","dependency_job_id":null,"html_url":"https://github.com/winjs-dev/winjs-plugin-request","commit_stats":null,"previous_names":["winjs-dev/winjs-plugin-request"],"tags_count":2,"template":false,"template_full_name":"winjs-dev/winjs-plugin-template","purl":"pkg:github/winjs-dev/winjs-plugin-request","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/winjs-dev%2Fwinjs-plugin-request","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/winjs-dev%2Fwinjs-plugin-request/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/winjs-dev%2Fwinjs-plugin-request/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/winjs-dev%2Fwinjs-plugin-request/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/winjs-dev","download_url":"https://codeload.github.com/winjs-dev/winjs-plugin-request/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/winjs-dev%2Fwinjs-plugin-request/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279020655,"owners_count":26086895,"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","status":"online","status_checked_at":"2025-10-14T02:00:06.444Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","http","plugin","request","userequest","vue-hooks-plus","winjs"],"created_at":"2025-10-14T19:18:03.997Z","updated_at":"2025-10-14T19:18:05.324Z","avatar_url":"https://github.com/winjs-dev.png","language":"TypeScript","readme":"# winjs-plugin-request\n\nWinJS 框架的 HTTP 请求插件，基于 axios 和 vue-hooks-plus，提供了强大的请求处理能力和 Vue 3 Composition API 支持。\n\n\u003cp\u003e\n  \u003ca href=\"https://npmjs.com/package/@winner-fed/plugin-request\"\u003e\n   \u003cimg src=\"https://img.shields.io/npm/v/@winner-fed/plugin-request?style=flat-square\u0026colorA=564341\u0026colorB=EDED91\" alt=\"npm version\" /\u003e\n  \u003c/a\u003e\n  \u003cimg src=\"https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square\u0026colorA=564341\u0026colorB=EDED91\" alt=\"license\" /\u003e\n  \u003ca href=\"https://npmcharts.com/compare/@winner-fed/plugin-request?minimal=true\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/@winner-fed/plugin-request.svg?style=flat-square\u0026colorA=564341\u0026colorB=EDED91\" alt=\"downloads\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## 特性\n\n- 🚀 基于 axios 的强大 HTTP 请求功能\n- 📦 开箱即用的 Vue 3 `useRequest` hooks\n- 🔧 灵活的请求/响应拦截器配置\n- 🛡️ 完善的错误处理机制\n- 📝 完整的 TypeScript 类型定义\n- ⚙️ 可配置的数据字段提取\n- 🎯 支持 Vue 2 和 Vue 3 双版本\n\n## 安装\n\n```bash\nnpm install @winner-fed/plugin-request\n# 或者\nyarn add @winner-fed/plugin-request\n# 或者\npnpm add @winner-fed/plugin-request\n```\n\n## 使用\n\n### 1. 在 `.winrc.ts` 中配置插件\n\n```typescript\nimport { defineConfig } from 'win';\n\nexport default defineConfig({\n  plugins: ['@winner-fed/plugin-request'],\n  request: {\n    dataField: 'data' // 可选，默认为 'data'，设置为 '' 则不提取数据字段\n  }\n});\n```\n\n### 2. 在 `app.ts` 中配置请求拦截器\n\n```typescript\nimport { RequestConfig } from 'winjs';\n\nexport const request: RequestConfig = {\n  timeout: 10000,\n  baseURL: 'https://api.example.com',\n  \n  // 请求拦截器\n  requestInterceptors: [\n    [\n      (config) =\u003e {\n        // 添加认证 token\n        config.headers.Authorization = `Bearer ${getToken()}`;\n        return config;\n      },\n      (error) =\u003e {\n        console.error('请求拦截器错误:', error);\n        return Promise.reject(error);\n      }\n    ]\n  ],\n  \n  // 响应拦截器\n  responseInterceptors: [\n    [\n      (response) =\u003e {\n        // 处理响应数据\n        if (response.data.code === 200) {\n          return response;\n        }\n        throw new Error(response.data.message);\n      },\n      (error) =\u003e {\n        console.error('响应拦截器错误:', error);\n        return Promise.reject(error);\n      }\n    ]\n  ],\n  \n  // 错误处理配置\n  errorConfig: {\n    errorHandler: (error, opts) =\u003e {\n      console.error('全局错误处理:', error);\n      // 自定义错误处理逻辑\n    },\n    errorThrower: (res) =\u003e {\n      if (res.success === false) {\n        throw new Error(res.message || '请求失败');\n      }\n    }\n  }\n};\n```\n\n### 3. 使用 request 方法\n\n```typescript\nimport { request } from 'winjs';\n\n// 基本用法\nconst data = await request('/api/users');\n\n// 带参数的 POST 请求\nconst result = await request('/api/users', {\n  method: 'POST',\n  data: { name: 'John', age: 30 }\n});\n\n// 获取完整响应\nconst response = await request('/api/users', {\n  getResponse: true\n});\n\n// 单次请求拦截器\nconst data = await request('/api/users', {\n  requestInterceptors: [\n    (config) =\u003e {\n      config.headers['X-Custom-Header'] = 'value';\n      return config;\n    }\n  ]\n});\n```\n\n### 4. 使用 useRequest Hook (Vue 3)\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cdiv v-if=\"loading\"\u003e加载中...\u003c/div\u003e\n    \u003cdiv v-else-if=\"error\"\u003e错误: {{ error.message }}\u003c/div\u003e\n    \u003cdiv v-else\u003e\n      \u003ch1\u003e用户列表\u003c/h1\u003e\n      \u003cul\u003e\n        \u003cli v-for=\"user in data\" :key=\"user.id\"\u003e\n          {{ user.name }}\n        \u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/div\u003e\n    \u003cbutton @click=\"refresh\"\u003e刷新\u003c/button\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport { useRequest } from 'winjs';\n\n// 基本用法\nconst { data, loading, error, refresh } = useRequest(() =\u003e {\n  return request('/api/users');\n});\n\n// 带参数的请求\nconst { data: userData, loading: userLoading } = useRequest(\n  (userId) =\u003e request(`/api/users/${userId}`),\n  {\n    manual: true, // 手动触发\n    onSuccess: (data) =\u003e {\n      console.log('请求成功:', data);\n    },\n    onError: (error) =\u003e {\n      console.error('请求失败:', error);\n    }\n  }\n);\n\n// 触发带参数的请求\nconst fetchUser = (id) =\u003e {\n  userData.run(id);\n};\n\u003c/script\u003e\n```\n\n## 配置选项\n\n### request 配置\n\n| 参数 | 类型 | 默认值 | 描述 |\n|------|------|--------|------|\n| `dataField` | `string` | `'data'` | 响应数据字段名，设置为 `''` 则不提取数据字段 |\n\n### RequestConfig 接口\n\n```typescript\ninterface RequestConfig extends AxiosRequestConfig {\n  errorConfig?: {\n    errorHandler?: (error: RequestError, opts: RequestOptions) =\u003e void;\n    errorThrower?: (res: any) =\u003e void;\n  };\n  requestInterceptors?: RequestInterceptorTuple[];\n  responseInterceptors?: ResponseInterceptorTuple[];\n}\n```\n\n## API 文档\n\n### request(url, options?)\n\n发送 HTTP 请求的核心方法。\n\n#### 参数\n\n- `url`: `string` - 请求 URL\n- `options`: `RequestOptions` - 请求配置选项\n\n#### 返回值\n\n- `Promise\u003cT\u003e` - 响应数据 (默认)\n- `Promise\u003cAxiosResponse\u003cT\u003e\u003e` - 完整响应 (当 `getResponse: true` 时)\n\n#### 示例\n\n```typescript\n// 基本 GET 请求\nconst users = await request('/api/users');\n\n// POST 请求\nconst user = await request('/api/users', {\n  method: 'POST',\n  data: { name: 'John', email: 'john@example.com' }\n});\n\n// 获取完整响应\nconst response = await request('/api/users', {\n  getResponse: true\n});\n```\n\n### useRequest(service, options?)\n\nVue 3 Composition API Hook，用于管理异步请求状态。\n\n#### 参数\n\n- `service`: `(...args: any[]) =\u003e Promise\u003cany\u003e` - 请求服务函数\n- `options`: `UseRequestOptions` - Hook 配置选项\n\n#### 返回值\n\n```typescript\ninterface UseRequestResult {\n  data: Ref\u003cT\u003e;\n  loading: Ref\u003cboolean\u003e;\n  error: Ref\u003cError | null\u003e;\n  run: (...args: any[]) =\u003e Promise\u003cT\u003e;\n  runAsync: (...args: any[]) =\u003e Promise\u003cT\u003e;\n  refresh: () =\u003e Promise\u003cT\u003e;\n  mutate: (data: T) =\u003e void;\n  cancel: () =\u003e void;\n}\n```\n\n#### 示例\n\n```typescript\nconst { data, loading, error, run, refresh } = useRequest(\n  (keyword) =\u003e request(`/api/search?q=${keyword}`),\n  {\n    manual: true,\n    debounceWait: 300,\n    onSuccess: (data) =\u003e {\n      console.log('搜索成功:', data);\n    }\n  }\n);\n```\n\n### getRequestInstance()\n\n获取 axios 实例，用于更高级的定制。\n\n#### 返回值\n\n- `AxiosInstance` - 配置好的 axios 实例\n\n#### 示例\n\n```typescript\nimport { getRequestInstance } from 'winjs';\n\nconst axiosInstance = getRequestInstance();\n\n// 使用 axios 实例\nconst response = await axiosInstance.get('/api/users');\n```\n\n## 拦截器\n\n### 请求拦截器\n\n```typescript\nconst requestInterceptor: RequestInterceptorTuple = [\n  (config) =\u003e {\n    // 修改请求配置\n    config.headers.Authorization = `Bearer ${token}`;\n    return config;\n  },\n  (error) =\u003e {\n    // 处理请求错误\n    return Promise.reject(error);\n  }\n];\n```\n\n### 响应拦截器\n\n```typescript\nconst responseInterceptor: ResponseInterceptorTuple = [\n  (response) =\u003e {\n    // 处理响应数据\n    if (response.data.code === 200) {\n      return response;\n    }\n    throw new Error(response.data.message);\n  },\n  (error) =\u003e {\n    // 处理响应错误\n    return Promise.reject(error);\n  }\n];\n```\n\n## 错误处理\n\n### 全局错误处理\n\n```typescript\nexport const request: RequestConfig = {\n  errorConfig: {\n    errorHandler: (error, opts) =\u003e {\n      if (error.response?.status === 401) {\n        // 处理未授权错误\n        redirectToLogin();\n      } else if (error.response?.status === 500) {\n        // 处理服务器错误\n        showErrorMessage('服务器错误，请稍后重试');\n      }\n    }\n  }\n};\n```\n\n### 单个请求错误处理\n\n```typescript\ntry {\n  const data = await request('/api/users');\n} catch (error) {\n  if (error.response?.status === 404) {\n    console.log('用户不存在');\n  } else {\n    console.error('请求失败:', error);\n  }\n}\n```\n\n## 类型定义\n\n插件提供了完整的 TypeScript 类型定义：\n\n```typescript\nimport type {\n  RequestConfig,\n  RequestOptions,\n  RequestError,\n  RequestInterceptor,\n  ResponseInterceptor,\n  ErrorInterceptor\n} from 'winjs';\n```\n\n## 许可证\n\n[MIT](./LICENSE).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwinjs-dev%2Fwinjs-plugin-request","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwinjs-dev%2Fwinjs-plugin-request","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwinjs-dev%2Fwinjs-plugin-request/lists"}