React项目实践系列二

wind3110991 发布于2019-08-26 12:02 / 2143人阅读

摘要：数据分析平台实践系列二这期主要讲接口的请求配置设置代理上一篇文章说明了使用远程，那下一步就是让前端请求环境了。建立一个测试接口在项目中便可直接便可。在项目中，我们选用了。在使用前，需要对所有的请求与响应进行统一拦截，以便后期管理。

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

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

设置代理

上一篇文章说明了使用远程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);
    }
);

混合云云服务器怎么部署react项目 php项目实践 python实践项目 python项目实践

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108068.html

前端每周清单年度总结与盘点

摘要：前端每周清单年度总结与盘点在过去的八个月中，我几乎只做了两件事，工作与整理前端每周清单。本文末尾我会附上清单线索来源与目前共期清单的地址，感谢每一位阅读鼓励过的朋友，希望你们能够继续支持未来的每周清单。 showImg(https://segmentfault.com/img/remote/1460000010890043); 前端每周清单年度总结与盘点在过去的八个月中，我几乎只做了...

jackwang 2019-08-22 15:54 评论0 收藏0
前端资源系列（4）-前端学习资源分享&前端面试资源汇总

摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...

princekin 2019-08-20 11:28 评论0 收藏0
前端每周清单第 41 期 : Node 与 Rust、OpenCV 的火花，网络安全二三事

摘要：的网站仍然使用有漏洞库上周发布了开源社区安全现状报告，发现随着开源社区的日渐活跃，开源代码中包含的安全漏洞以及影响的范围也在不断扩大。与应用安全是流行的服务端框架，本文即是介绍如何使用以及其他的框架来增强应用的安全性。 showImg(https://segmentfault.com/img/remote/1460000012181337?w=1240&h=826); 前端每周清单专注...

syoya 2019-08-21 17:48 评论0 收藏0
王下邀月熊_Chevalier的前端每周清单系列文章索引

摘要：感谢王下邀月熊分享的前端每周清单，为方便大家阅读，特整理一份索引。王下邀月熊大大也于年月日整理了自己的前端每周清单系列，并以年月为单位进行分类，具体内容看这里前端每周清单年度总结与盘点。感谢王下邀月熊_Chevalier 分享的前端每周清单，为方便大家阅读，特整理一份索引。王下邀月熊大大也于 2018 年 3 月 31 日整理了自己的前端每周清单系列，并以年/月为单位进行分类，具...

2501207950 2019-08-22 14:53 评论0 收藏0
王下邀月熊_Chevalier的前端每周清单系列文章索引

摘要：感谢王下邀月熊分享的前端每周清单，为方便大家阅读，特整理一份索引。王下邀月熊大大也于年月日整理了自己的前端每周清单系列，并以年月为单位进行分类，具体内容看这里前端每周清单年度总结与盘点。感谢王下邀月熊_Chevalier 分享的前端每周清单，为方便大家阅读，特整理一份索引。王下邀月熊大大也于 2018 年 3 月 31 日整理了自己的前端每周清单系列，并以年/月为单位进行分类，具...

Markxu 2019-08-05 18:01 评论0 收藏0