Simulating data and API responses

In this section, you'll learn how to create mock files to simulate backend logic and API responses.

Mock files are helpful to decouple frontend development from backend development, as you don't need the backend ready to make requests and populate your interface with data.

A mock file is simply a JavaScript object with endpoint route definitions and a response to each endpoint. Consider the following example:

export default {
  'GET /api/products': { total: 0, products: [] },
};

In this example, when the project is running, we can send an HTTP GET request to http://localhost:8000/api/products to receive the object defined in the mock file.

Umi will registry all files with the .js and .ts extensions inside the mock folder as mock files.

Now that we know how mock files work, let's create mock files for our application. Follow these steps:

1. In the project root directory, create a new folder...