转载

React项目实践系列二

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

建立一个测试接口

在项目中便可直接 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 设置代理。

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

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

请求接口

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

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

// 请求拦截
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 全局提示。

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 添加启动命令。

"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 ，之后改动命令。

"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 的拦截器。

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

原文 https://juejin.im/post/5b1bad02e51d4506914ed7aa

正文到此结束