数据分析平台-实践系列二

发表于

数据分析平台-前端实践(二)

这期主要讲接口的请求配置

设置代理

上一篇文章说明了使用远程Mock Server，那下一步就是让前端请求Mock环境了。

建立一个测试接口

2018-06-09 17:16:43屏幕截图

在项目中便可直接fetch('https://mock.yonyoucloud.com/mock/212/user/getAll')便可。

但是此处会有一个问题，现在在开发环境下是请求Mock，而一旦到生产环境，应该是需要写成fetch('/user/getAll')。

因此需要添加代理请求，让生产环境与开发环境请求相同的接口。

webpack-dev-server基于node-http-proxy实现了反向代理。在配置文件设置devServer属性便可实现代理功能。而create-react-app是在package.json设置代理。

1
2
3
4
5
6
"proxy": {
  "/user/": {
    "target": "https://mock.yonyoucloud.com/mock/212",
    "changeOrigin": true
  }
}

建立多个项目接口，设置不同的代理。

2018-06-09 17:15:11屏幕截图

2018-06-09 17:17:57屏幕截图

请求接口

如果使用原生的fetch，我们需要对fetch做多一层封装，而npm上原本就有其他好用的HTTP库 可以使用，无需重复造轮子。在项目中，我们选用了axios。

在使用axios前，需要对所有的请求与响应进行统一拦截，以便后期管理。而axios已经为我们实现了此功能。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 请求拦截
axios.interceptors.request.use(
    config => {
        return config
    },
    error => {
        return Promise.reject(error);
    }
);
// 响应拦截
axios.interceptors.response.use(
    response => {
        return response;
    },
    error => {
        return Promise.reject(error);
    }
);

如拦截响应为500的错误，我们需要弹出提示框服务器错误。使用Ant Design的message全局提示。

1
2
3
4
5
6
7
8
9
10
11
12
13
import {message} from 'antd';
axios.interceptors.response.use(
    response => {
        return response;

    },
    error => {
        if (error.response && error.response.status === 500) {
            message.error('服务器错误');
        }
        return Promise.reject(error);
    }
);

环境设置

在设置请求后，还有一个问题，后台使用Tomcat，其设置self前缀为访问服务器路径，app前缀为访问静态资源路径。

而当我们在Mock环境下项目是根据业务来创建的，即如请求用户信息，为user前缀，请求文章信息，为article前缀，那么，现在面临如果是JAVA环境，所有接口需要添加self前缀，为MOCK环境则无需添加。因此需要自定义环境变量。

NODE_ENV就是一个常用的环境变量，一般设为production或者development。而其实环境变量设置原理其实就是设置Node.js中的process.env。

我们在package.json中的scripts添加启动命令。

1
2
3
4
5
6
"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"

这里需要区分操作系统。在*nix下设置环境变量为export，而在windows下则是set。并且由于使用create-react-app，自定义环境变量需要以REACT_APP_为前缀。

之后我们对命令再做一次精简，使用cross-env，cross-env能跨平台地设置及使用环境变量。先添加依赖yarn add cross-env -D，之后改动命令。

1
2
3
"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"

使用yarn mock或npm run mock。在代码中console.log(process.env.REACT_APP_SERVER)，可在控制台看到输出了java。

其后改动axios的拦截器。

1
2
3
4
5
6
7
8
9
10
11
axios.interceptors.request.use(
    config => {
        if (process.env.REACT_APP_SERVER === 'java') {
            config.url = `/self${config.url}`;
        }
        return config
    },
    error => {
        return Promise.reject(error);
    }
);