{"id":26919178,"url":"https://github.com/wsfe/mockajax","last_synced_at":"2025-04-01T21:30:33.116Z","repository":{"id":43418847,"uuid":"112727635","full_name":"wsfe/mockajax","owner":"wsfe","description":"easy intercept and modify XHR or fetch, mock the response.","archived":false,"fork":false,"pushed_at":"2022-12-11T17:07:12.000Z","size":1213,"stargazers_count":11,"open_issues_count":13,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-02T23:05:22.897Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wsfe.png","metadata":{"files":{"readme":"README-zhcn.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":"2017-12-01T10:31:17.000Z","updated_at":"2022-07-14T18:42:43.000Z","dependencies_parsed_at":"2023-01-27T03:30:49.023Z","dependency_job_id":null,"html_url":"https://github.com/wsfe/mockajax","commit_stats":null,"previous_names":["angrytoro/mockajax"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wsfe%2Fmockajax","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wsfe%2Fmockajax/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wsfe%2Fmockajax/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wsfe%2Fmockajax/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wsfe","download_url":"https://codeload.github.com/wsfe/mockajax/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246712875,"owners_count":20821810,"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":[],"created_at":"2025-04-01T21:30:32.485Z","updated_at":"2025-04-01T21:30:33.105Z","avatar_url":"https://github.com/wsfe.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MockAjax\n\n[![npm version](https://img.shields.io/npm/v/mockajax.svg?style=flat-square)](https://www.npmjs.org/package/mockajax)\n[![Coverage Status](https://coveralls.io/repos/github/angrytoro/mockajax/badge.svg?branch=master)](https://coveralls.io/github/angrytoro/mockajax?branch=master)\n[![build status](https://travis-ci.org/angrytoro/mockajax.svg?branch=master\u0026style=flat-square)](https://travis-ci.org/angrytoro/mockajax)\n[![npm downloads](https://img.shields.io/npm/dm/mockajax.svg?style=flat-square)](http://npm-stat.com/charts.html?package=mockajax)\n\n**MockAjax**是用做接口数据模拟的插件，它是基于**XMLHttpRequest**，因此没有框架限制，你可以用jQuery做http client，也可以用axios，同时**MockAjax**没有框架依赖，方便使用。\n\u003e `备注：目前支持status=200`\n\n# 背景\n在后端接口还没开发完成的时候，前端经常需要自己做数据模拟，虽然市面上提供了[easy-mock](https://github.com/easy-mock/easy-mock)，或者[yapi](https://github.com/YMFE/yapi)这种接口模拟平台，但是有些时候这些平台是没法满足我们的定制需求的。例如：接口2的请求参数依赖于接口1模拟出来的数据。\n市面上已经有的比较出名的是[jquery-mockjax](https://github.com/jakerella/jquery-mockjax)，但是它是基于jQuery的，并不适用于axios等其他的http client。因此需要有一个脱离于http client的库来提供mock功能。\n\n# 开始使用\n## 引入mock库\n```\n\u003cscript src=\"/dist/mockajax.min.js\"\u003e\u003c/script\u003e\n```\n**注意:**这个库一定要ajax请求之前引用\n### 编写mock规则\n例如：\n```\nMockAjax.mock([\n  {\n    url: '/user/:id/:name',\n    response: function(req) {\n      return {\n        name: req.params.name,\n        id: req.params.id,\n        age: req.query.age,\n        country: req.query.country\n      }\n    }\n  },\n  {\n    url: '/user/:name',\n    response: function(req) {\n      return {\n        name: req.params.name,\n        age: req.query.age,\n        country: req.query.country\n      }\n    }\n  },\n  {\n    url: '/user',\n    method: 'POST',\n    response: function(req) {\n      return {\n        name: req.body.firstName + req.body.lastName\n      }\n    }\n  },\n  {\n    url: '/user',\n    method: 'put',\n    response: function(req) {\n      return {\n        name: req.body.firstName + req.body.lastName\n      }\n    }\n  },\n  {\n    url: '/user/:id',\n    method: 'delete',\n    response: function(req) {\n      return {\n        id: req.params.id\n      }\n    }\n  }\n])\n```\n然后可以做任何的ajax请求了\n```\naxios.post('/user', {\n  firstName: 'free',\n  lastName: 'fish'\n}).then((response) =\u003e {\n  assert.equal(response.data.name, 'freefish')\n}).catch(error =\u003e {\n})\n```\n\n# API介绍\n**MockAjax**提供3个API。\n## setBasePath\n`void MockAjax.setBasePath(/* String */ path)`设置基础路径。有时候接口前缀很长，我们不想在写数据模拟的时候重复的写同样的前缀，这个时候我们就可以使用这个接口。\n例如：接口前缀是`https://github.com/api/v1`\n```\nMockAjax.setBasePath('/api/v1')\n```\n## openFetch\n`void MockAjax.openFetch()`: 打开`fetch`请求的mock。`MockAjax`默认不支持`fetch`请求的mock。如果想要支持，需要调用这个函数。\n```\nMockAjax.openFetch()\nfetch('/user/123/freefish?age=20\u0026country=china').then(response =\u003e {\n  assert.equal(response.data.id, 123)\n  assert.equal(response.data.name, 'freefish')\n  assert.equal(response.data.age, 20)\n  assert.equal(response.data.country, 'china')\n})\n```\n## beforeMock\n`request Mockajax.beforeMock(function(request) { return request })`,设置mock前的动作，默认可以不设置，如果设置了需要返回request对象。\n## afterMock\n`request Mockajax.afterMock(function(response) { return response })`,设置mock后的动作，默认可以不设置，如果设置了需要返回response对象。\n## mock\n`void MockAjax.mock(/* Array|Object */ options)`设置mock规则，`options`可以是数组也可以是对象。\n**options**:\n- `url`: [String | RegExp]定义接口地址，可以是正则表达式也可以是普通的接口地址，支持restfull风格的url。\n- `method`: [String]请求的方法，`GET`、`POST`或者`PUT`等，默认是`GET`\n- `response`: `Object Function([/* Object */ request])`提供生成模拟数据的方法，`MockAjax`根据这个函数生成相应的模拟数据，返回一个mock对象，可以是任何数据。\n  - `request`: 客户端请求的数据，包含如下4组要对象`xhr`, `query`(适配?key=value这种查询条件), `params`(适配restful风格的API), `body`(非get请求，传给后端的表单数据)，这4组对象都是Object类型。\n\n# 参考\n\u003e - [xhook](https://github.com/jpillora/xhook)\n\u003e - [jquery-mockjax](https://github.com/jakerella/jquery-mockjax)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwsfe%2Fmockajax","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwsfe%2Fmockajax","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwsfe%2Fmockajax/lists"}