{"id":19849641,"url":"https://github.com/ckpack/fetch-helper","last_synced_at":"2025-05-01T22:30:51.573Z","repository":{"id":57102346,"uuid":"450460086","full_name":"ckpack/fetch-helper","owner":"ckpack","description":"A lightweight wrapper for fetch API","archived":false,"fork":false,"pushed_at":"2023-09-01T05:24:32.000Z","size":613,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-15T08:09:11.213Z","etag":null,"topics":["axios","fetch"],"latest_commit_sha":null,"homepage":"","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/ckpack.png","metadata":{"files":{"readme":"README-ZH.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-21T11:09:46.000Z","updated_at":"2023-04-24T02:46:25.000Z","dependencies_parsed_at":"2024-11-12T13:26:54.462Z","dependency_job_id":"caed6b44-518c-4634-a061-06e45242e795","html_url":"https://github.com/ckpack/fetch-helper","commit_stats":{"total_commits":34,"total_committers":1,"mean_commits":34.0,"dds":0.0,"last_synced_commit":"71c8be444c031f9f1beadd2a90aa1313703e31ab"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ckpack%2Ffetch-helper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ckpack%2Ffetch-helper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ckpack%2Ffetch-helper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ckpack%2Ffetch-helper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ckpack","download_url":"https://codeload.github.com/ckpack/fetch-helper/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251954780,"owners_count":21670871,"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","fetch"],"created_at":"2024-11-12T13:22:22.464Z","updated_at":"2025-05-01T22:30:51.249Z","avatar_url":"https://github.com/ckpack.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @ckpack/fetch-helper\n\n\u003ch4 align=\"center\"\u003e\n  \u003ca href=\"/README-ZH.md\"\u003e中文\u003c/a\u003e\n  |\n  \u003ca href=\"/README.md\"\u003eENGLISH\u003c/a\u003e\n\u003c/h4\u003e\n\n`@ckpack/fetch-helper`是对 [Fetch](https://developer.mozilla.org/zh-CN/docs/Web/API/fetch) API的轻量级封装。 需要在支持`Fetch`API的浏览器或者`Node.js`(版本小于v18.0.0)中使用.\n\n## API文档\n\n### fetchHelper\u003cT=Response\u003e(input: RequestInfo, init?: FetchHelperInit | undefined): Promise\u003cT\u003e\n\n+ `input`: 请求的url或者 [`Request`](https://developer.mozilla.org/zh-CN/docs/Web/API/Request) 对象\n+ `init`: 一个配置项对象，包括所有对请求的设置, 支持原生[fetch](https://developer.mozilla.org/zh-CN/docs/Web/API/fetch)的所有配置项参数,并添加了以下参数\n  + `baseURL`: 如果传入的`input`不是绝对地址，该值将被添加到 `input` 之前,\n  + `params`: 与请求一起发送的 URL 参数, 必须是普通对象或 `URLSearchParams` 对象\n  + `paramsSerializer`: 设置自定义序列化`params`参数函数\n  + `transformRequest`: 允许在请求发出之前更改请求参数\n  + `transformResponse`: 允许在请求响应后更改响应数据\n  + `adapter`: 允许自定义处理请求，这使得测试更容易。\n\n返回一个 [`Promise`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 对象，默认是[`Response`](https://developer.mozilla.org/zh-CN/docs/Web/API/Response)类型，也可以通过`transformResponse`返回其他类型\n\n```js\nimport fetchHelper from '@ckpack/fetch-helper'\n\n// 等于 fetch('http://jsonplaceholder.typicode.com/comments?id=1')\nfetchHelper('/comments', {\n  baseURL: 'http://jsonplaceholder.typicode.com',\n  params: {\n    id: 1,\n  },\n})\n```\n\n### fetchHelper.create\n使用自定义配置创建一个新的 `fetchHelper` 实例。\n\n```js\nconst instance = fetchHelper.create({\n  // 你也可以在此处设置其他参数\n  baseURL: 'http://jsonplaceholder.typicode.com',\n})\n```\n### fetchHelper.default\n\n通过`default`属性永久修改请求实例配置:\n\n```js\ninstance.default.baseURL = 'http://localhost:3000'\n```\n\n### fetchHelper[method]\n\n为方便起见，为所有受支持的请求方法提供了别名。\n\n```js\nfetchHelper.request(config)\nfetchHelper.get(url, params?, config?)\nfetchHelper.head(url, params?, config?)\nfetchHelper.options(url, params?, config?)\nfetchHelper.connect(url, params?, config?)\nfetchHelper.trace(url, params?, config?)\nfetchHelper.delete(url, body?, config?)\nfetchHelper.post(url, body?, config?)\nfetchHelper.put(url, body?, config?)\nfetchHelper.patch(url, body?, config?)\n```\n## 例子\n\n### 设置请求的配置\n\n\u003e create(defaultConfig?: FetchHelperInit)\n\n你可以使用`create`方法创建一个具有默认配置项对象的实例\n\n\n```js\nimport fetchHelper from '@ckpack/fetch-helper'\n\nconst instance = fetchHelper.create({\n  // 你也可以在此处设置其他参数\n  baseURL: 'http://jsonplaceholder.typicode.com',\n})\n\n// fetch('http://jsonplaceholder.typicode.com/comments?id=1')\ninstance('/comments', {\n  params: {\n    id: 1,\n  },\n})\n\n// 通过default属性永久修改配置\n// fetch('http://localhost:3000/comments?id=1')\ninstance.default.baseURL = 'http://localhost:3000'\ninstance('/comments', {\n  params: {\n    id: 1,\n  },\n})\n\n// 通过参数临时修改配置\n// fetch('http://localhost:3000/comments?id=1')\nawait instance('/comments', {\n  baseURL: 'http://localhost:3000',\n  params: {\n    id: 1,\n  },\n})\n```\n\n### 设置请求`method`\n\n你可以通过`method`参数设置请求方法，如 `GET`、`POST`\n```js\nawait fetchHelper('http://jsonplaceholder.typicode.com/posts', {\n  method: 'POST',\n  headers: {\n    'Content-type': 'application/json',\n  },\n  body: JSON.stringify({ firstName: 'Fred', lastName: 'Flintstone' }),\n})\n\n// 或者\nawait fetchHelper.post('http://jsonplaceholder.typicode.com/posts', JSON.stringify({ firstName: 'Fred', lastName: 'Flintstone' }), {\n  headers: {\n    'Content-type': 'application/json',\n  },\n})\n```\n### params\n\n设置查询字符串(query string)，该参数序列化后被拼接到`url`后面\n```js\n// 等于 fetch('http://jsonplaceholder.typicode.com/comments?limit=10\u0026page=2\u0026ids=1%2C2%2C3')\nfetchHelper('/comments', {\n  baseURL: 'http://jsonplaceholder.typicode.com',\n  params: {\n    limit: 10,\n    page: 2,\n    ids: [1, 2, 3] // ids=1,2,3\n  },\n})\n```\n\n### paramsSerializer\n\n`paramsSerializer` 是一个可选函数，负责序列化 `params`, 默认使用`new URLSearchParams(params).toString()`完成序列化\n\n```js\n// 等于 fetch('http://jsonplaceholder.typicode.com/comments?limit=10\u0026page=2\u0026ids%5B%5D=1\u0026ids%5B%5D=2\u0026ids%5B%5D=3')\nfetchHelper('/comments', {\n  baseURL: 'http://jsonplaceholder.typicode.com',\n  params: {\n    limit: 10,\n    page: 2,\n    ids: [1,2,3] // ids[]=1\u0026ids[]=2\u0026ids[]=3\n  },\n  paramsSerializer: (params) =\u003e Qs.stringify(params, {arrayFormat: 'brackets'},\n});\n```\n\n### transformRequest\n\n通过`transformRequest`可以更改请求参数配置, 默认`fetch`通过`application/json`传参需要手动序列化`JSON.stringify(body)`,然后设置`Headers`中的`Content-type`为`application/json`, 你可以通过`transformRequest`简化该方式\n```js\nconst resuest = fetchHelper.create({\n  baseURL: 'http://jsonplaceholder.typicode.com',\n  transformRequest(init) {\n    const { body } = init\n    if (typeof body === 'object' \u0026\u0026 !(body instanceof FormData || body instanceof URLSearchParams)) {\n      const headers = new Headers(init.headers)\n      headers.set('Content-type', 'application/json')\n      init.headers = headers\n      init.body = JSON.stringify(body)\n    }\n    return init\n  },\n})\n\nconst res = await resuest.post('/posts', { firstName: 'Fred', lastName: 'Flintstone' })\n```\n### 通过`transformResponse`转换请求结果\n\n```js\nconst fetchHelper = fetchHelper('http://jsonplaceholder.typicode.com/comments', {\n  transformResponse(response) {\n    return response.json()\n  },\n})\n// 请求结果会被转为json\n```\n\n```ts\n// 如果使用了TypeScript可以指定泛型类型\nconst fetchHelper = fetchHelper\u003c{ id: number }[]\u003e('http://jsonplaceholder.typicode.com/comments', {\n  transformResponse(response) {\n    return response.json()\n  },\n})\n// fetchHelper[0].id\n```\n### 设置请求`timeout`\n\n```js\nconst instance = fetchHelper.create({\n  transformRequest(config) {\n    if (config.timeout) {\n      const controller = new AbortController()\n      config.signal = controller.signal\n      setTimeout(() =\u003e controller.abort('timeout'), config.timeout)\n    }\n    return config\n  },\n})\n\nawait instance('http://jsonplaceholder.typicode.com/comments', {\n  timeout: 6000,\n})\n// 六秒后自动取消请求\n```\n\n### 自定义`adapter`\n\n```js\nconst fetchResponse = await fetchHelper('http://jsonplaceholder.typicode.com/comments', {\n  params: {\n    limit: 1,\n    page: 2\n  },\n  adapter(input) {\n    return new Response(`${input}`)\n  },\n})\n\nconsole.log(await fetchResponse.text())\n// 不经过fetch直接返回结果: http://jsonplaceholder.typicode.com/comments?limit=1\u0026page=2\n```\n\n更多例子请参考 [`@ckpack/fetch-helper`](./__test__)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fckpack%2Ffetch-helper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fckpack%2Ffetch-helper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fckpack%2Ffetch-helper/lists"}