Use mocks in APIPOST

APIPOST allows you to realistically return interface data without a back-end application. You can use APIPOST for pure front-end demonstrations at the beginning of a project, or for data simulation during development to separate the front end from the back end. Before using APIPOST, your team may implement data emulation in one or more of the following scenarios:

  • Native handwritten data emulation, which generates a lot of mock code in front end code.
  • Ajax interception is implemented using can-fixtures from MockJS or CANJS, and the necessary JSON rules are configured locally.
  • The back end falsifies data at the Controller layer and returns it to the front end.

Either way, developers are required to write code that has nothing to do with the project itself. The first and second methods also require the front-end project to introduce unnecessary JS files locally.

Mock services using APIPOST

You can do this through the Mock service provided by APIPOST.

Writing Mock rules

Mock rule templates support type richness in APIPOST (as of version 5.4).

Basic data (fixed JSON structure)

{" code ":" 0 ", "data" : {" name ":" zhang sanfeng ", "age" : 100}, "desc" : "success"}Copy the code

Basic data (Mock random JSON structure)

{ "code": "0", "data": { "list|20": [{ "name": "@name", "age": "@integer(2)" }], "url": "https://echo.apipost.cn"}, "desc": "success"}Copy the code

RESTFUL logical data

In some scenarios, we may need to return data after adding appropriate logical processing according to the entry rules of the interface. A simple scenario is the login scenario. You need to check whether the login is successful based on the user name and password. Or, we need to dynamically return product information based on product ID, and so on.

ApiPost’s Mock service now provides a solution to this scenario. In the following example, we use the _req.body object, which means:

When a POST request is x-www-form-urlencoded or application/ JSON, we can get the request’s parameter object.

{ "code": "0000", "data": { "verifySuccess": function() { let body = _req.body; return body.username === 'admin' && body.password === '123456'; }, "userInfo": function() { let body = _req.body; if (body.username === 'admin' && body.password === '123456') { return Mock.mock({ username: "admin", email: "@email", address: "@address" }); } else { return null; },}, "desc": "success"}Copy the code

Fill in the relative address of the Mock URL

The Mock URL relative address is mandatory (if you do not fill in the Mock URL relative address, you will not get the response result properly). You can automatically get Mock urls by enabling “Automatically Get Mock URLS” in your Settings.

When turned on, the APIPOST automatically intercepts the PATH portion as the relative PATH to the Mock URL based on the interface URL you entered.

Send Mock urls using APIPOST

After completing the above two steps, you can send the detailed data returned by viewing the Mock by switching to the Mock environment in the APIPOST.

Send the generated mock URL address to the front end

You can send the mock URL generated by the APIPOST to the front end in place of your interface address so that the front end can use the data you mock to debug first. When your interface is complete, replace it back.

Mock for APIPOST is developed based on mock.js. See mock.js documentation for details.