构建坚如磐石的 Ionic 应用的高级工作流程。第 3 部分：Orbit
序幕
App-Development-Orbit 中的空气变得有些稀薄！幸运的是，本系列关于使用Generator-M-Ionic开发 Ionic 应用程序的第 3 部分配备了一个甜蜜的氧气面罩，里面充满了救命的元素：环境、CORS 代理和用于应用程序图标、启动画面、构建变量和应用程序交付的构建工具。在我们扩展第 2 部分中准备好的项目之前，请深吸一口气。
Gulp 环境
因此，您已设置好应用，并在实现应用逻辑的同时添加了插件和其他组件。有时，您可能希望与外部后端交换数据。没问题。只需注入旧的 Angular $http 服务，使用该 Angular promise API处理所有 HTTP 调用，您就大功告成了。
例如，假设我想向Postman Echo API发出一些请求。
$http.get('https://echo.getpostman.com/get') //$http service
.then(function (response) {
console.log(response); //promise setup
});
是的！就这么简单！
如果客户将端点（即 API 的测试版）的 URL 更改为https://blabber.getpostman.com，会怎样呢？
你可能会想：“好吧，如果这种情况持续发生，我将把 URL 放在一个常量中。”真聪明！幸运的是，你的项目已经在app/main/constants/config-const.js中附带了一个Config常量。只需调整你的代码即可。
.constant('Config', {
API_ENDPOINT: 'https://blabber.getpostman.com'
// ..
});
$http.get(Config.API_ENDPOINT + '/get')
.then(function (response) {
console.log(response);
});
天才！
客户告诉您，您需要实现的某些功能仅适用于测试版 API https://blabber.getpostman.com，而某些功能仅适用于生产 API https://echo.getpostman.com。
“这会很烦人！我需要一直交换端点 URL！”
别担心！环境来拯救你！
app/main/constants/中有两个 JSON 文件，您将在其中填充端点：
// env-dev.json
{
"API_ENDPOINT": "https://blabber.getpostman.com"
}
// env-prod.json
{
"API_ENDPOINT": "https://echo.getpostman.com"
}
然后修改您的控制器代码：
$http.get(Config.ENV.API_ENDPOINT + '/get')
.then(function (response) {
console.log(response);
});
现在如果你运行以下其中一个：
gulp watch
# or
gulp build
# or
gulp --cordova "run <platform>"
# or anything similar
如果没有任何标志，它将默认为 dev 环境，并且你的 HTTP 调用将最终针对env-dev.json的API_ENDPOINT：https://blabber.getpostman.com。 怎么会这样？因为环境任务将 JSON 文件的内容注入到你的Config常量的ENV对象中：
angular.module('main')
.constant('Config', {
// gulp environment: injects environment vars
ENV: {
/*inject-env*/
'API_ENDPOINT': 'https://blabber.getpostman.com'
/*endinject*/
},
// ..
});
另一方面，添加如下所示的--env=prod标志将把你的 HTTP 调用发送到https://echo.getpostman.com，即你的env-prod.json的API_ENDPOINT。
gulp watch --env=prod
很酷吧？
环境可用于各种任务：管理不同的 API 密钥、令牌、日志记录级别、功能开关以及我们刚刚发现的 API 端点。最好的部分是，您可以拥有任意数量的环境！有关这个难以理解但又如此吸引人的魔法的更详细说明，请参阅我们的环境指南。
CORS 与代理
解决了 API 混乱的问题。但是等等，那是什么？当你发送 HTTP 请求时，开发控制台中突然出现了类似这样的内容。而且是鲜红色的！
XMLHttpRequest cannot load https://echo.getpostman.com/. The
'Access-Control-Allow-Origin' header contains the invalid value ''.
Origin 'http://localhost:3000' is therefore not allowed access.
“您好，REST API 配置不正确！”相信我，我和我的团队已经被CORS（跨域资源共享）问题困扰过很多次了。
因此，我创建了一个关于如何处理CORS 问题和代理的小指南。如果你正在处理 CORS 或代理，这是一本很棒的读物！有多种选择，根据你的项目，有些可能比其他的更好。
我的指南中介绍的最直接的策略之一是Generator-M-Ionic 项目附带的内置代理。
还记得之前的那段代码吗？使用该 API 端点实际上会遇到 CORS 错误：
$http.get('https://echo.getpostman.com/get')
.then(function (response) {
console.log(response);
});
为了配置内置代理，我只需使用以下参数启动gulp watch ：
gulp watch --proxyPath=/proxy --proxyMapTo=https://echo.getpostman.com
现在，向我的代理发出以下请求将为我提供我想要的来自https://echo.getpostman.com/get的响应。
$http.get('/proxy/get')
.then(function (response) {
console.log(response);
});
事实上，现在我可以发送任何模式为/proxy/**/*的请求，它将通过代理映射到https://echo.getpostman.com/**/* 。这与生成器的环境功能非常契合：
$http.get(Config.ENV.API_ENDPOINT + '/get')
.then(function (response) {
console.log(response);
});
您的环境 JSON 文件的内容如下：
// env-dev.json
{
"API_ENDPOINT": "/proxy"
}
// env-prod.json
{
"API_ENDPOINT": "https://echo.getpostman.com"
}
然后使用--env标志在针对代理触发或直接针对 API 触发之间进行切换：
# will default to --env=dev and thus use the proxy
gulp watch --proxyPath=/proxy --proxyMapTo=https://echo.getpostman.com
# the built version will fire directly against the API
gulp build --env=prod
就这么简单！不再需要手动、繁琐且容易出错地更改端点。
非常有用，不是吗？
默认任务
好吧，输入整个内容也有点乏味：
gulp watch --proxyPath=/proxy --proxyMapTo=https://echo.getpostman.com
特别是如果你将--env=prod或--no-open添加到列表中。我喜欢使用后者来防止浏览器每次都打开新窗口。如果我的项目知道我希望这些标志与gulp watch一起运行，那不是很好吗<font style="vertical
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~