{"id":25420273,"url":"https://github.com/starlight36/fetch-http-client","last_synced_at":"2025-10-31T11:30:36.155Z","repository":{"id":57234589,"uuid":"58183067","full_name":"starlight36/fetch-http-client","owner":"starlight36","description":"A http client wrapper for fetch api with middleware support.","archived":false,"fork":false,"pushed_at":"2018-01-24T11:34:23.000Z","size":24,"stargazers_count":43,"open_issues_count":2,"forks_count":7,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-02-01T10:37:57.882Z","etag":null,"topics":["asynchronous","fetch-api","middleware","react","react-native","rest-client"],"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/starlight36.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}},"created_at":"2016-05-06T05:29:11.000Z","updated_at":"2023-01-06T21:59:26.000Z","dependencies_parsed_at":"2022-09-15T04:41:13.585Z","dependency_job_id":null,"html_url":"https://github.com/starlight36/fetch-http-client","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/starlight36%2Ffetch-http-client","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/starlight36%2Ffetch-http-client/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/starlight36%2Ffetch-http-client/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/starlight36%2Ffetch-http-client/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/starlight36","download_url":"https://codeload.github.com/starlight36/fetch-http-client/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239073995,"owners_count":19577127,"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":["asynchronous","fetch-api","middleware","react","react-native","rest-client"],"created_at":"2025-02-16T19:37:04.631Z","updated_at":"2025-10-31T11:30:36.102Z","avatar_url":"https://github.com/starlight36.png","language":"JavaScript","readme":"# Fetch Http Client\n\n[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/starlight36/fetch-http-client/master/LICENSE) [![npm version](https://badge.fury.io/js/fetch-http-client.svg)](https://badge.fury.io/js/fetch-http-client) [![Build Status](https://travis-ci.org/starlight36/fetch-http-client.svg?branch=master)](https://travis-ci.org/starlight36/fetch-http-client) [![Coverage Status](https://coveralls.io/repos/github/starlight36/fetch-http-client/badge.svg)](https://coveralls.io/github/starlight36/fetch-http-client)\n\nA http client wrapper for [Fetch API](https://github.com/whatwg/fetch) with middleware support.\n\n# Introduction\n\nFetch API is a elegant way to access HTTP resources. I used it in my React/ReactNative project as the default network layer. But it still has some inconvenience to use. For example, every request should carry the access token in HTTP request headers, ervery request error should be logged to console etc. \n\nIf Fetch API support middleware, everything can be elegantly fixed. Both [fetch-plus](https://github.com/RickWong/fetch-plus) and [http-client](https://github.com/mjackson/http-client) provided the middleware support, but if you need some asynchronous pre-request opreation, they could not suppport elegantly.\n\nSo this project is another choice to use Fetch API with middleware support, it's quite simple and powerful.\n\n# Installation\n\n```shell\nnpm install fetch-http-client --save\n```\n\n# Usage\n\n## Import\n\n```js\nimport FetchHttpClient, { json } from 'fetch-http-client';\n```\n\n## Quick start\n\n```js\n// Create a new client object.\nconst client = new FetchHttpClient('http://api.example.com/endpoint');\n\n// Add access token\nclient.addMiddleware(request =\u003e {\n  request.options.headers['X-Access-Token'] = 'secret';\n});\n\n// Add json support\nclient.addMiddleware(json());\n\n// Add Logging\nclient.addMiddleware(request =\u003e response =\u003e {\n  console.log(request, response);\n});\n\n// Fire request.\nclient.get('test').then(response =\u003e console.log(response.jsonData));\n\n// Path variables support.\nclient.get('users/{id}', { uriParams: { id: 1 } }).then(response =\u003e console.log(response.jsonData));\n```\n\n## Asynchronous pre-request middleware\n\nif your access token is stored in a asynchronous storage, it should be fetch before every request, you can use such kind of middleware:\n\n```js\n// Add access token asynchronously\nclient.addMiddleware(request =\u003e {\n  return AsynchronousStorage.fetch('accessToken').then(token =\u003e {\n    request.options.headers['X-Access-Token'] = token;\n    return request;\n  });\n});\n```\n\nThat means your middleware could return a `Promise` object and the real request opreate will be issued after the asynchronous method finished.\n\n**NEVER forget returning the request object after you handled the result!**\n\n# API\n\n## FetchHttpClient\n\n```js\nnew FetchHttpClient(baseUrl:string);\n```\n\n### fetch\n\n`fetch` method can been used the same as Fetch API.\n\n```\ninstance.fetch(uri:string[, options: object])\n```\n\n### request\n\nConvenience way to issue a request with specific verb.\n\n```\ninstance.request(uri:string, method:string[, options: object])\n```\n\n### get\n\nConvenience way to issue a GET request.\n\n```\ninstance.get(uri:string[, options: object])\n```\n\n### post\n\nConvenience way to issue a POST request.\n\n```\ninstance.post(uri:string[, options: object])\n```\n\n### put\n\nConvenience way to issue a PUT request.\n\n```\ninstance.put(uri:string[, options: object])\n```\n\n### delete\n\nConvenience way to issue a DELETE request.\n\n```\ninstance.delete(uri:string[, options: object])\n```\n\n### patch\n\nConvenience way to issue a PATCH request.\n\n```\ninstance.patch(uri:string[, options: object])\n```\n\n## Build-in middlewares\n\n### query\n\nThis middleware could add the ability to append object value to query string:\n\n```js\n// Add query middleware\nclient.addMiddleware(query());\n\n// Request\nclient.get('test', {\n  query: {\n    foo: 'FOO',\n    bar: 'BAR',\n  },\n});\n```\n\nIt will request to `http://api.example.com/endpoint/test?foo=FOO\u0026bar=BAR`.\n\n### form\n\nLike `query`, this could be used to handle post form values.\n\n```js\n// Add form middleware\nclient.addMiddleware(form());\n\n// Request\nclient.post('test', {\n  form: {\n    foo: 'FOO',\n    bar: 'BAR',\n  },\n});\n```\n\n### header\n\nA convenience middleware to add headers to request.\n\n```js\n// Add header middleware\nclient.addMiddleware(header({\n  'X-Request-By': 'FetchHttpClient',\n}));\n\n```\n\n### userAgent\n\nA convenience middleware to set User-Agent to headers.\n\n```js\n// Add header middleware\nclient.addMiddleware(userAgent({\n  'Client': '1.1',\n}));\n\n```\n\n### json\n\nConvert object to request and parse from response.\n\n```js\n// Add json middleware\nclient.addMiddleware(json());\n\n// Request\nclient.post('add', {\n  json: {\n    foo: 'FOO',\n  },\n}).then(response =\u003e {\n  console.log(response.jsonData);\n});\n```\n\n### timeout\n\nSet timeout options to fetch.\n\n```js\n// global timeout option\nclient.addMiddleware(timeout(1000));\n\n// Request timeout option priority global timeout option\nclient.get('test', {\n  timeout: 2000, // If you not add timeout middleware, it will not take effect\n});\n```\n\n### credentials\n\nSet credentials options to fetch. If you want to automatically send cookies for the current domain, use this middleware and config it as `same-origin`.\n\n```js\n// Add credentials middleware\nclient.addMiddleware(credentials('same-origin'));\n```\n\n# Feedback\n\nIf you have any questions, use [Issues](https://github.com/starlight36/fetch-http-client/issues).\n\nSina Weibo: [@starlight36](http://weibo.com/starlight36)\n\n# License\n\nMIT Licence.\n\n\n\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstarlight36%2Ffetch-http-client","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstarlight36%2Ffetch-http-client","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstarlight36%2Ffetch-http-client/lists"}