Data Analysis Platform – Practice Series II

This section focuses on interface request configuration

Set the agent

The last article covered using a remote Mock Server, so the next step is to have the front end request the Mock environment.

Create a test interface

In the project can be directly fetch (‘ https://mock.yonyoucloud.com/mock/212/user/getAll ‘).

There is a problem, however, with Mock requests now in the development environment and fetch(‘/user/getAll’) once in production.

Therefore, you need to add proxy requests so that the production environment requests the same interface as the development environment.

Webpack-dev-server implements reverse proxy based on Node-HTTP-proxy. The proxy function is implemented by setting the devServer property in the configuration file. Create-react-app sets the proxy in package.json.

  "proxy": {
    "/user/": {
      "target": "https://mock.yonyoucloud.com/mock/212"."changeOrigin": true}}Copy the code

Set up multiple project interfaces and set up different agents.

Request interface

If we use a native FETCH, we need to wrap fetch one more layer, and there are other good HTTP libraries already available on NPM without having to reinvent the wheel. For the project, we used Axios.

Before using AXIos, all requests and responses need to be intercepted uniformly for later management. Axios already does that for us.

// Request interception
axios.interceptors.request.use(
    config= > {
        return config
    },
    error => {
        return Promise.reject(error); });// Response interception
axios.interceptors.response.use(
    response= > {
        return response;
    },
    error => {
        return Promise.reject(error); });Copy the code

If intercepting an error with a response of 500, we need to pop up a message indicating server error. Use Ant Design’s Message global prompt.

import {message} from 'antd';
axios.interceptors.response.use(
    response= > {
        return response;

    },
    error => {
        if (error.response && error.response.status === 500) {
            message.error('Server error');
        }
        return Promise.reject(error); });Copy the code

Environment setup

After setting up the request, there is a problem that Tomcat is used in the background, which prefixes self to access the server path and app to access the static resource path.

In the Mock environment, where projects are created based on business, such as requesting user information with the user prefix and requesting article information with the article prefix, all interfaces need to be prefixed with self in the JAVA environment, but not in the Mock environment. Therefore, you need to customize environment variables.

NODE_ENV is a common environment variable, usually set to production or development. Environment variables are set to process.env in Node.js.

We add startup commands to scripts in package.json.

"windowsmock": "set REACT_APP_SERVER=mock&&npm start"."windowsjava": "set REACT_APP_SERVER=java&&npm start"."linuxmock": "export REACT_APP_SERVER=mock && npm start"."linuxjava": "export REACT_APP_SERVER=java && npm start"."windowsbuild": "set PUBLIC_URL=/app&&set REACT_APP_SERVER=java&&npm run build"."linuxbuild": "export PUBLIC_URL=/app && export REACT_APP_SERVER=java && npm run build"
Copy the code

There is a distinction between operating systems. Set the environment variable to export under *nix and set under Windows. And because create-react-app is used, custom environment variables must be prefixed with REACT_APP_.

We then streamlined the command again to use cross-env, which can set and use environment variables across platforms. Add dependency yarn add cross-env -d before changing the command.

"mock": "cross-env REACT_APP_SERVER=mock npm start"."java": "cross-env REACT_APP_SERVER=java npm start"."appbuild": "cross-env REACT_APP_SERVER=java PUBLIC_URL=/app npm run build"
Copy the code

Use YARN Mock or NPM run Mock. In the code console.log(process.env.react_app_server), you can see Java output on the console.

Then change the Axios interceptor.

axios.interceptors.request.use(
    config= > {
        if (process.env.REACT_APP_SERVER === 'java') {
            config.url = `/self${config.url}`;
        }
        return config
    },
    error => {
        return Promise.reject(error); });Copy the code