{"id":15413817,"url":"https://github.com/hotell/axios-http","last_synced_at":"2025-04-19T12:04:42.211Z","repository":{"id":57127431,"uuid":"141467630","full_name":"Hotell/axios-http","owner":"Hotell","description":"Injectable axios HttpClient wrapper for Angular and injection-js","archived":false,"fork":false,"pushed_at":"2018-12-05T00:57:33.000Z","size":201,"stargazers_count":8,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-29T07:41:36.229Z","etag":null,"topics":["axios-ecosystem","dependency-injection","http-client","promise-api","typescript"],"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/Hotell.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-07-18T17:25:10.000Z","updated_at":"2023-08-22T16:24:29.000Z","dependencies_parsed_at":"2022-08-31T17:20:30.968Z","dependency_job_id":null,"html_url":"https://github.com/Hotell/axios-http","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hotell%2Faxios-http","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hotell%2Faxios-http/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hotell%2Faxios-http/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hotell%2Faxios-http/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Hotell","download_url":"https://codeload.github.com/Hotell/axios-http/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249690360,"owners_count":21311308,"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-ecosystem","dependency-injection","http-client","promise-api","typescript"],"created_at":"2024-10-01T16:58:54.350Z","updated_at":"2025-04-19T12:04:42.181Z","avatar_url":"https://github.com/Hotell.png","language":"TypeScript","readme":"# axios-http\n\n\u003e Injectable axios wrapper for Angular and [injection-js](https://github.com/mgechev/injection-js) 🎯\n\n[![Greenkeeper badge](https://badges.greenkeeper.io/hotell/axios-http.svg)](https://greenkeeper.io/)\n[![Build Status](https://travis-ci.org/Hotell/axios-http.svg?branch=master)](https://travis-ci.org/Hotell/axios-http)\n[![NPM version](https://img.shields.io/npm/v/%40martin_hotell%2Faxios-http.svg)](https://www.npmjs.com/package/@martin_hotell/axios-http)\n![Downloads](https://img.shields.io/npm/dm/@martin_hotell/axios-http.svg)\n[![Standard Version](https://img.shields.io/badge/release-standard%20version-brightgreen.svg)](https://github.com/conventional-changelog/standard-version)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://conventionalcommits.org)\n\n## Installing\n\n```sh\nyarn add @martin_hotell/axios-http\n\n# install peer dependencies\nyarn add axios injection-js tslib\n\n# install Reflect API polyfill\nyarn add @abraham/reflection\n```\n\n\u003e **Note:**\n\u003e\n\u003e You need a polyfill for the [Reflect API](http://www.ecma-international.org/ecma-262/6.0/#sec-reflection).\n\u003e\n\u003e We highly recommend tiny [reflection](https://www.npmjs.com/package/@abraham/reflection) polyfill ( 3kB only ! )\n\u003e\n\u003e Also for TypeScript you will need to enable `experimentalDecorators` and `emitDecoratorMetadata` flags within your `tsconfig.json`\n\n## Getting started\n\n### with injection-js:\n\n```ts\nimport { Injectable, ReflectiveInjector } from 'injection-js'\nimport {\n  registerHttpClientProviders,\n  HttpClient,\n} from '@martin_hotell/axios-http'\n\n@Injectable()\nclass UserService {\n  constructor(private http: HttpClient) {}\n\n  getUsers() {\n    return this.http.get\u003cUser[]\u003e('/api/users')\n  }\n}\n\nconst injector = ReflectiveInjector.resolveAndCreate([\n  registerHttpClientProviders(),\n  UserService,\n])\n```\n\n### With Angular:\n\n```ts\nimport { Module } from '@angular/core'\nimport { HttpClientModule, HttpClient } from '@martin_hotell/axios-http'\n\n@Injectable({\n  provideIn: 'root',\n})\nclass UserService {\n  constructor(private http: HttpClient) {}\n\n  getUsers() {\n    return this.http.get\u003cUser[]\u003e('/api/users')\n  }\n}\n\n@Module({\n  providers: [HttpClient, HttpClientModule.forRoot()],\n})\nclass AppModule {}\n```\n\n## API\n\naxios-http is just a injectable wrapper which creates an axios instance, so API is the same as for axios.instance ( except Interceptors )\n\n- HttpClient [methods](https://github.com/axios/axios#instance-methods)\n- HttpClient [request config schema](https://github.com/axios/axios#request-config)\n- HttpClient [response schema ](https://github.com/axios/axios#response-schema)\n\n## Examples\n\nGo checkout [examples](./examples) !\n\n## Guides\n\n### Type-checking the response\n\nWhen you execute `http.get('/api/user/123').then(response=\u003eresponse.data)`, on Success the response object is typeof `AxiosPromise\u003cany\u003e` with anonymous type of `data` property. It doesn't know what the shape of that object is.\n\nYou can tell `HttpClient` the type of the response, to make consuming the output easier and more obvious.\n\nFirst, define an interface with the correct shape:\n\n```ts\nexport interface User {\n  name: string\n  email: string\n}\n```\n\nThen, specify that interface as the `HttpClient.get()` call's generic type parameter in the service:\n\n```ts\ngetUser(id:string) {\n  // now returns a Promise\u003cUser\u003e\n  return this.http.get\u003cUser\u003e(`/api/users/${id}`).then(response =\u003e response.data);\n}\n```\n\nNow our `getUser()` returns typed data property as `Promise\u003cUser\u003e`, so we can access our data in type-safe way\n\n```ts\nheroService.getUser('123').then({name,email}=\u003e...)\n```\n\n### Configuring HttpClient\n\n- when registering providers you can pass optional config to `forRoot(config)`\n\n```ts\nimport { Injectable, ReflectiveInjector } from 'injection-js'\nimport { HttpClientModule, HttpClientModule } from '@martin_hotell/axios-http'\n\n@Injectable()\nclass UserService {\n  /*...*/\n}\n\nconst injector = ReflectiveInjector.resolveAndCreate([\n  HttpClientModule.forRoot({\n    baseUrl: 'api/swapi',\n    withCredentials: true,\n  }),\n  UserService,\n])\n```\n\n### Registering Interceptors\n\n`axios-http` implements similar API for registering interceptors like Angular HttpClient, so you can inject any other service to your interceptors. Under the hood it transforms this API to leverage pure `axios` ✌️\n\nTo wire-up our interceptor, you need to register provider via `HTTP_INTERCEPTORS` token and set `mutli:true`:\n\n```ts\nimport { Injectable, ReflectiveInjector } from 'injection-js'\nimport {\n  HttpClientModule,\n  HttpInterceptor,\n  HTTP_INTERCEPTORS,\n  HttpRequest,\n  HttpResponse,\n} from '@martin_hotell/axios-http'\n\n@Injectable()\nclass Logger {\n  log(...args: any[]) {}\n  error(...args: any[]) {}\n}\n\n@Injectable()\nexport class MyInterceptor implements HttpInterceptor {\n  // we can inject other injectables\n  constructor(private logger: Logger) {}\n\n  interceptRequest(request: HttpRequest) {\n    const modifiedData = request.data.replace(/pizza/gi, '🍕')\n    const modifiedRequest = { ...request, data: modifiedData }\n\n    return modifiedRequest\n  }\n\n  interceptRequestError(error: any) {\n    this.logger.error('whooops!')\n\n    return Promise.reject(error)\n  }\n\n  interceptResponse(response: HttpResponse) {\n    this.logger.log('---\u003e data:', response.data)\n    this.logger.log('---\u003e filter:', response.params.get('filter'))\n\n    return response\n  }\n\n  interceptResponseError(error: any) {\n    this.logger.error('whooops!')\n\n    return Promise.reject(error)\n  }\n}\n\nconst injector = ReflectiveInjector.resolveAndCreate([\n  Logger,\n  HttpClientModule.forRoot(),\n  // wire up our interceptor\n  { provide: HTTP_INTERCEPTORS, useClass: MyInterceptor, multi: true },\n])\n```\n\n---\n\n## Publishing\n\nExecute `yarn release` which will handle following tasks:\n\n- bump package version and git tag\n- update/(create if it doesn't exist) CHANGELOG.md\n- push to github master branch + push tags\n- publish build packages to npm\n\n\u003e releases are handled by awesome [standard-version](https://github.com/conventional-changelog/standard-version)\n\n### Pre-release\n\n- To get from `1.1.2` to `1.1.2-0`:\n\n`yarn release --prerelease`\n\n- **Alpha**: To get from `1.1.2` to `1.1.2-alpha.0`:\n\n`yarn release --prerelease alpha`\n\n- **Beta**: To get from `1.1.2` to `1.1.2-beta.0`:\n\n`yarn release --prerelease beta`\n\n### Dry run mode\n\nSee what commands would be run, without committing to git or updating files\n\n`yarn release --dry-run`\n\n### Check what files are gonna be published to npm\n\n- `yarn pack` OR `yarn release:preflight` which will create a tarball with everything that would get published to NPM\n\n## Tests\n\nTest are written and run via Jest 💪\n\n```\nyarn test\n# OR\nyarn test:watch\n```\n\n## Style guide\n\nStyle guides are enforced by robots, I meant prettier and tslint of course 🤖 , so they'll let you know if you screwed something, but most of the time, they'll autofix things for you. Magic right ?\n\n### Style guide npm scripts\n\n```sh\n#Format and fix lint errors\nyarn ts:style:fix\n```\n\n## Generate documentation\n\n`yarn docs`\n\n## Commit ( via commitizen )\n\n- this is preferred way how to create convetional-changelog valid commits\n- if you preffer your custom tool we provide a commit hook linter which will error out, it you provide invalid commit message\n- if you are in rush and just wanna skip commit message valiation just prefix your message with `WIP: something done` ( if you do this please squash your work when you're done with proper commit message so standard-version can create Changelog and bump version of your library appropriately )\n\n`yarn commit` - will invoke [commitizen CLI](https://github.com/commitizen/cz-cli)\n\n### Troubleshooting\n\n## Licensing\n\n[MIT](./LICENSE.md) as always\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhotell%2Faxios-http","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhotell%2Faxios-http","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhotell%2Faxios-http/lists"}