{"id":18904644,"url":"https://github.com/djyde/cans-plugin-http","last_synced_at":"2026-03-04T14:30:26.309Z","repository":{"id":147580444,"uuid":"86435974","full_name":"djyde/cans-plugin-http","owner":"djyde","description":"http (axios) plugin for cans","archived":false,"fork":false,"pushed_at":"2017-04-01T08:19:34.000Z","size":53,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-12-31T10:31:30.130Z","etag":null,"topics":["axios","cans"],"latest_commit_sha":null,"homepage":null,"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/djyde.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-03-28T08:41:48.000Z","updated_at":"2018-12-09T12:53:46.000Z","dependencies_parsed_at":"2023-05-31T16:30:50.256Z","dependency_job_id":null,"html_url":"https://github.com/djyde/cans-plugin-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/djyde%2Fcans-plugin-http","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/djyde%2Fcans-plugin-http/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/djyde%2Fcans-plugin-http/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/djyde%2Fcans-plugin-http/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/djyde","download_url":"https://codeload.github.com/djyde/cans-plugin-http/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239889026,"owners_count":19713702,"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","cans"],"created_at":"2024-11-08T09:09:05.839Z","updated_at":"2026-03-04T14:30:26.237Z","avatar_url":"https://github.com/djyde.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# cans-plugin-http\n\n[![npm](https://img.shields.io/npm/v/cans-plugin-http.svg)](https://www.npmjs.com/package/cans-plugin-http)\n[![circle](https://circleci.com/gh/djyde/cans-plugin-http.svg?style=shield)](https://circleci.com/gh/djyde/cans-plugin-http)\n\nHTTP (axios) plugin for cans\n\n## Install\n\n```bash\n$ yarn add cans-plugin-http\n```\n\n## Usage\n\n### httpPlugin\n\n#### Example\n\n```js\nimport cans from 'cans'\nimport { observable, action } from 'cans/mobx'\nimport { httpPlugin } from 'cans-plugin-http'\n\nconst app = cans()\n\napp.use(httpPlugin)\n\napp.model({\n  observable: app =\u003e {\n    return observable({\n      list: [],\n\n      fetchList: action.bound(async function () {\n        const list = (await app.http.get('/api/v1/lists')).data\n        // modify `list`\n      })\n    })\n  }\n})\n```\n\n#### options\n\n- axiosConfig: AxiosConfig. If provided, `app.http` will return `axios.create(axiosConfig)`\n\n### restPlugin\n\n`restPlugin` is useful when your backend exposed frontend a standard RESTful interface. `restPlugin` will help you generate RESTful cans model that return a observable, which contains RESTful action and loading status:\n\nMethod | Path            | action\n-------|-----------------|----------------\nGET    | /posts          | app.models.rest.posts.index\nGET    | /posts/:id      | app.models.rest.posts.show\nPOST   | /posts          | app.models.rest.posts.create\nPUT    | /posts/:id      | app.models.rest.posts.update\nDELETE | /posts/:id      | app.models.rest.posts.delete\n\n*(Inspired by [Egg](https://eggjs.org/zh-cn/basics/router.html))*\n\n#### Example\n\n```js\nimport cans from 'cans'\nimport { observable, action } from 'cans/mobx'\nimport { restPlugin } from 'cans-plugin-http'\n\nconst app = cans()\n\nconst URL = 'http://jsonplaceholder.typicode.com'\n\napp.use(restPlugin, { \n  resources: [\n    { name: 'posts', url: URL }\n  ]\n})\n\nconst PostList = ({ posts }) =\u003e (\n  \u003cdiv\u003e\n    {posts.map(post =\u003e (\n      \u003ch1\u003e{post.title}\u003c/h1\u003e\n      \u003cp\u003e{post.body}\u003c/p\u003e\n    ))}\n  \u003c/div\u003e\n)\n\nconst PostApp = inject(({ models }) =\u003e (\n  \u003cdiv\u003e\n    \u003cbutton disable={models.rest.posts.loading.index} onClick={models.rest.posts.index}\u003eFetch\u003c/button\u003e\n    \u003cPostList posts={models.rest.posts.data.index} /\u003e\n  \u003c/div\u003e\n))\n```\n\n#### options\n\n- resources\n\n  - name: resource name\n  - url: endpoint URL\n  - total: (AxiosResponse) =\u003e string | number - Compute total count from response\n  - defaultData: { index: any, show: any } - Data fetched from `rest[name].index` will be set in `rest[name].data.index`. `show` is the same. `index` is `[]` by default. `show` is `{}` by default.\n\n#### What in `app.models.rest[name]`\n\nrestPlugin create observables for every resource:\n\n```ts\nobservable({\n  // data fetched from RESTful interface\n  data: {\n    index: defaultData.index || [],\n    show: defaultData.show || {}\n  },\n  // loading status\n  loading: {\n    index: boolean,\n    show: boolean,\n    create: boolean,\n    update: boolean,\n    delete: boolean\n  },\n\n  // action\n  async index(),\n  async show(id),\n  async create(data),\n  async update(id, data),\n  async delete(id)\n})\n```\n\n## License\n\nMIT License\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdjyde%2Fcans-plugin-http","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdjyde%2Fcans-plugin-http","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdjyde%2Fcans-plugin-http/lists"}