β

React项目实践系列二

Harries Blog™ 37 阅读

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

建立一个 测试 接口

React项目实践系列二

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

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

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

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

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

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

React项目实践系列二
React项目实践系列二

请求接口

如果使用原生的 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);
    }
);

环境设置

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

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

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

我们在 package. js on 中的 scr ip ts 添加启动命令。

"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

本站部分文章源于互联网,本着传播知识、有益学习和研究的目的进行的转载,为网友免费提供。如有著作权人或出版方提出异议,本站将立即删除。如果您对文章转载有任何疑问请告之我们,以便我们及时纠正。 PS:推荐一个微信公众号: askHarries 或者qq群:474807195,里面会分享一些资深架构师录制的视频录像:有Spring,MyBatis,Netty源码分析,高并发、高性能、分布式、微服务架构的原理,JVM性能优化这些成为架构师必备的知识体系。还能领取免费的学习资源,目前受益良多

转载请注明原文出处: Harries Blog™ » React项目实践系列二

作者:Harries Blog™
追心中的海,逐世界的梦
原文地址:React项目实践系列二, 感谢原作者分享。

发表评论