{"id":23705846,"url":"https://github.com/fidme/sleek-networking","last_synced_at":"2026-03-07T22:07:56.643Z","repository":{"id":33059238,"uuid":"141308845","full_name":"FidMe/sleek-networking","owner":"FidMe","description":"A simple and efficient fetch wrapper for any JS application 🚀","archived":false,"fork":false,"pushed_at":"2022-12-07T21:15:05.000Z","size":296,"stargazers_count":7,"open_issues_count":13,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-08-07T02:29:18.358Z","etag":null,"topics":["fetch","javascript","network","react-native","reactjs","vuejs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/FidMe.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}},"created_at":"2018-07-17T15:28:09.000Z","updated_at":"2022-01-19T10:54:18.000Z","dependencies_parsed_at":"2023-01-14T23:13:33.849Z","dependency_job_id":null,"html_url":"https://github.com/FidMe/sleek-networking","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/FidMe/sleek-networking","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FidMe%2Fsleek-networking","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FidMe%2Fsleek-networking/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FidMe%2Fsleek-networking/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FidMe%2Fsleek-networking/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FidMe","download_url":"https://codeload.github.com/FidMe/sleek-networking/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FidMe%2Fsleek-networking/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273436009,"owners_count":25105530,"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-09-03T02:00:09.631Z","response_time":76,"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":["fetch","javascript","network","react-native","reactjs","vuejs"],"created_at":"2024-12-30T14:58:30.617Z","updated_at":"2026-03-07T22:07:56.572Z","avatar_url":"https://github.com/FidMe.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Sleek Networking, 🚀\n\n[![npm version](https://badge.fury.io/js/sleek-networking.svg)](https://badge.fury.io/js/sleek-networking)\n[![dependencies status](https://david-dm.org/FidMe/sleek-networking/status.svg)](https://david-dm.org/FidMe/sleek-networking)\n[![Build Status](https://travis-ci.org/FidMe/sleek-networking.svg?branch=master)](https://travis-ci.org/FidMe/sleek-networking)\n\nA simple and efficient `fetch` wrapper that works across any Javascript (React/React Native/Vue JS, etc) app.\nIt provides you with a clean and consistent way to call your Api, meanwhile handling JWT authentication, middlewares, etc.\n\n### Features\n\n- JWT authentication\n- Transparent absolute or relative url handling\n- Request retry\n- Middlewares\n- Custom headers functions\n\n### Install\n\n`npm install --save @fidme/sleek-networking`\n\nor\n\n`yarn add @fidme/sleek-networking`\n\n### Api wrapper\n\nIn order to use the Api across your app, you need to instantiate it with your configuration.\nHere are the params you may pass to it :\n\n```javascript\nimport { Api, Jwt } from \"@fidme/sleek-networking\";\n\nconst api = new Api({\n  scheme: \"http\",\n  retriesCount: 0,\n  timeout: 1000,\n  baseUrl: \"google.fr/api/v1\",\n  afterEach: [(request) =\u003e {}],\n  onError: [(error) =\u003e {}],\n  headers: {\n    \"content-type\": \"Application/JSON\",\n    \"X-Auth-Token\": () =\u003e new Jwt(\"1234\").generateToken(),\n  },\n});\n```\n\n### Usage\n\n```javascript\napi.get(\"posts\", options);\napi.post(\"posts\", body, options);\napi.put(\"posts\", body, options);\napi.delete(\"posts\", options);\n\napi.get(\"posts\").then((res) =\u003e console.log(res));\n/* \nEvery request returns an object containing this format :\n{ status: 200, body: { parsed: \"JSON\" }, header }\n*/\n```\n\nBy default, sleek-networking will assume you want to deal with JSON only.\nIf you query a JSON endpoint, no need to parse it afterwards.\nIf your Api returns something different from readable JSON, it will be returned as raw text.\n\nIf you want to send something different from Json, for example form data, you need to do the following :\n\n```javascript\nconst formData = new FormData();\nformData.append(\"key\", \"value\");\n\napi.post(\"yourendpoint\", formData, {\n  headers: [(\"Content-Type\": \"multipart/form-data; boundary=----yourboundary\")],\n});\n```\n\n### Providing JWT Header\n\nWith Sleek Networking it becomes easy to add JWT auth to your entire app. Simply import Jwt, provide your secret,\n\n```javascript\nimport { Jwt } from \"@fidme/sleek-networking\";\n\nnew Jwt(secret, optionalPayload, optionalHeader).generateToken(optionalPayload);\n```\n\n### Retrying fetch request\n\nIn case your request fails (timeout or no network), you can provide a `retriesCount` option to your config, and also to a single request configuration like that :\n\n```javascript\napi.get(\"posts\", { retriesCount: 5 });\n```\n\n### Middlewares\n\nYou can execute code after executing a request and before returning it to your app.\nIn order to do so, provide your config with a list of `afterEach: [() =\u003e {}]` functions to execute.\n\nExample use case, disconnecting a user after any `401` received\n\n```javascript\nnew Api({\n  ...restOfConfigOptions,\n  afterEach: [verifyAuthentication, doSomethingElse],\n});\n\nfunction verifyAuthentication(response) {\n  if (response.status === 401) user.logout();\n}\n```\n\n### Custom header function\n\nIn case you need to execute a function to add a header to any HTTP request, you may provide a function to your header configuration.\n\nFor example that allows you to use any kind of authentication library (in case your do not like the included JWT 😁).\n\n```javascript\nnew Api({\n  ...restOfConfigOptions,\n  headers: {\n    \"Content-Type\": \"Application/JSON\",\n    \"Custom-Request-Signature\": (request) =\u003e functionToCallEverytime(),\n    \"X-Auth-Token\": (request) =\u003e new Jwt(\"1234\").generateToken(),\n  },\n});\n```\n\nIf you need to visualize the request informations when processing your custom header function, you have a complete access to the `Request` object.\n\nFor example, say you need to add the HTTP method to the JWT payload, you can proceed like that :\n\n```javascript\n'X-Auth-Token': request =\u003e new Jwt('1234').generateToken({ method: request.method }),\n});\n```\n\nYou can access anything related to the current Request including :\n\n- `request.url`\n- `request.path`\n- `request.method`\n- `request.body`\n- `request.options` which is an object containing `headers` and other fetch/api options\n\n### Response handling\n\nInstead of returning the default fetch response which contains only status and hard to access body informations, it returns a formatted response.\n\n| Methods         | Description                                                                                  | Returns           |\n| --------------- | -------------------------------------------------------------------------------------------- | ----------------- |\n| succeeded       | Check if status is between `200` and `300` and if there is no error.                         | `boolean`         |\n| bodyIfSucceeded | Return the body of the request if the status is between `200` and `300` else return `false`. | `body` or `false` |\n| bodyOrThrow     | Return the body of the request if the status is between `200` and `300` else throw a error.  | `body` or throw   |\n| didNetworkFail  | If the network request failed, return `true` or `false`                                      | `boolean`         |\n| didServerFail   | Tell you if you get error from the server.                                                   | `boolean`         |\n\n### Contribute\n\nPlease add consistent testing when contributing.\nRun tests with `npm test`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffidme%2Fsleek-networking","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffidme%2Fsleek-networking","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffidme%2Fsleek-networking/lists"}