A must-have for the front end! 5 small mock tips to save time and improve efficiency, and it took one hour to leave work early

1. Some business scenarios that are difficult for the front end

In my work experience, there are probably the following situations where I need to wait for the back-end children's shoes to cooperate with me:

a. We cooperate with external projects and need to call a third-party interface.

Generally in this case, the business side negotiates the contract, goes through the process, and waits for the third-party review. We will directly start the development here, and there is no external interface available at this time; or the contract is negotiated, but the third-party docking The staff schedule has not yet arrived. In short, we need to wait.

b. Active grab nodes go online

An event that is in a hurry (such as Chinese Valentine's Day and Double Eleven) has come down, and the front and back ends are developed at the same time, and the interface can be debugged if the back end has not been developed.

c. The interface that needs to be called is very complicated.

Originally, I only needed a simple return, but due to various historical reasons and business segmentation, I needed to indirectly call N different complex interfaces, which caused this part of the workload to be very large and time-consuming, but it was of no great value.

At this time, I prefer to choose mock, and make it rough during joint debugging, and then wait for the test stage to let the test students expose the problem to me (please forgive me for being lazy hahah for testing children's shoes)

There are a lot of software for front-end mocking, so you can pick the right one yourself.

In fact, the requirements that all mock tools meet are similar. The key is to be able to simulate specific details in some business scenarios, and the details can reduce the time you spend on repetitive things.

I personally use apifox (www.apifox.cn). The advantage is that it can imitate more realistic business data, so I don’t need to adjust it twice.

If the time saved in details is calculated carefully every day, there will be one or two hours, and the saving is the length of time to leave work early.

I will only write here some time-saving tips for mocking data on Apifox that I have tried.

2. Time-saving and efficiency-improving tips

tips1: The commonly used return parameters are encapsulated into a data model and filled directly when used.

For example, in a music software, the most commonly used return data may be singer data and song data.

Artist data includes: artist profile picture, artist name, gender, 50 popular songs and other information;

Song data includes: song name, size, song link, album cover, belonging artist, lyrics file and other information.

If the above fields need to be set repeatedly every time the return value is set, it will be troublesome and time-consuming.

At this time, you can encapsulate the commonly used parameters into a data type, and fill it in directly when you fill in the return value, so that the interface can return the corresponding field.

tips2: The data adopts high simulation data to avoid data type and display related bugs

I used to falsify the data myself and sometimes ignored the format, just fill in numbers or just fill in a few Chinese characters, which is easy to cause unnecessary errors.

First, the returned data will be formatted, and errors will be reported if it does not conform to it. At this time, it will waste time to go back and modify;

Second, the display that does not conform to the data structure may also be abnormal. If this data is used for subsequent processing, it will also hinder the normal operation of the program.

The other software is not used in detail, I can't explain it in detail. If you use the apifox software to mock data, it provides many commonly used data types for filling in the returned data types.

When creating data, you can create more simulated data according to your business type.

Creating data is actually cumbersome and time-consuming. For ordinary ones such as Chinese names, if you want to create URL, zip code, hexadecimal color value, domain name, ID number, I often have to search the data rules to create it.

Generally, I select a certain type of data after the software fills in the return parameters, and apifox will automatically generate data that meets the requirements of the corresponding data structure.

It can support basic text, ID card, ip address, url and other data can also be imitated.

For example: I set the following data types in the return value:

The return value data is as follows, what comes out is the usable "true" data.

tips3: The boundary scene “

Apifox provides an advanced mock function: when the value filled in by the user in the request parameter meets a specific condition, the interface will return a specific value.

I generally use this function to test the boundary scenarios, such as setting the value of the request parameter to none to make the interface return a null value; or testing whether the UI performance of a certain field in various lengths is normal.

tips4: The error code uses enumerated type, and the debugging is compatible with abnormal scenes

In addition, sometimes our front-end needs to perform compatible processing on the error code returned by the back-end or give users relevant prompts.

When debugging this function, I have a more tricky way to use the advanced settings in the response parameter settings.

Fill in the error code in the form of an enumerated value. Test whether the front end has corresponding feedback when the back end returns different error code types.

tips5: Set a more accurate return value with business constraints

In mock data, in addition to the constraints of the data type itself, there are also business constraints.

Sometimes although the returned data type is what we want and conforms to the data format, it may not conform to our actual business scenarios.

Example: There are only 50,000 albums in a certain music library, but the album return value is set to integer, which may exceed the upper limit of the music library ID and return an abnormal value each time. But I need to return something to perform further operations, I need it to return normally.

At this time, you can enter the advanced settings and set the value range of the return value, so that the returned data can meet our debugging requirements.

Although these are small functional points, they can save you a lot of time in actual business.

At present, I only use the mock function for the apifox software, so I will share so much first, and I will share with you other tips that can improve efficiency and save time and effort later.

If you want to download, you can go directly to their official website www.apifox.cn. The software is currently free, and you can use it directly by downloading it.