通过 emberjs 调用 google api 时响应未定义答案

【问题标题】：response undefined when calling google api thru emberjs通过 emberjs 调用 google api 时响应未定义
【发布时间】：2018-05-28 03:06:33
【问题描述】：

我正在尝试调用 google api 从 ember js 获取地点建议。如下：这是服务模块

fetch(){
let url=`https://maps.googleapis.com/maps/api/place/autocomplete/json?input=IL&types=geocode&key=API_KEY`
return Ember.RSVP.resolve(Ember.$.ajax(url,{
method: 'GET'
}))
.then(
(response)=>{
console.log("google suggested places:",response);
return response;
})

*上面的 url 当与 API_KEY 一起提供并粘贴到浏览器中时，会返回一个带有建议位置的 JSON 响应。

另外，我在开发人员工具的 newtwork 选项卡中看到 JSON 响应，但 .then 无法捕获该响应，并在控制台中打印为未定义的响应。

参考：https://developers.google.com/places/web-service/autocomplete#place_autocomplete_results

在控制台中我看到“无法加载https://maps.googleapis.com/maps/api/place/autocomplete/json?input=IL&types=geocode&key=API_KEY：请求的资源上不存在'Access-control-Allow_origin'标头。因此不允许访问源'http://localhost:4200'。

我做错了什么？

【问题讨论】：

标签： javascript ajax google-maps-api-3 ember.js autocomplete

【解决方案1】：

您使用 Ember.RSVP.resolve 错误。它返回一个Promise，它会立即解析，并将值作为第一个参数传递。因此，在您的情况下，它以Ember.$ajax() 的返回值解析。我不太确定这个功能是否存在。我猜你的意思是Ember.$.ajax()，它只是jQuery.ajax() 的别名。但是这个应该返回一个jqXHR object。所以我不知道为什么你的代码没有抛出 Ember.$ajax() is not a function 或者为什么 response 是 undefined 而不是 jqXHR 对象。

但是，您将 ajax 调用包装在 Promise 中的方法是错误的。另外我想说使用 jQuery.ajax 不是最佳实践。在 ember.js 中有一些使 jQuery 成为可选的工作正在进行中，并且您不想将您的应用程序与它耦合。

我建议使用ember-fetch 或ember-ajax。

【讨论】：

这是一个错字，我只使用了 $.ajax，在主要内容中也进行了编辑。
好吧，我尝试使用 ember-ajax 并仍然遇到相同的错误，我可以在网络选项卡中看到响应，但此错误仍然存在“无法加载 maps.googleapis.com/maps/api/place/autocomplete/…: 没有”访问-control-Allow_origin'header 出现在请求的资源上。因此不允许访问 Origin 'localhost:4200'。这将停止获取响应（我的意思是即使在控制台中）
CORS 与 Google Map API 相关的问题完全是另一个问题。请针对该问题打开另一个问题。查看docs provided by Google for CORS 以开始使用。
打开了另一个线程：stackoverflow.com/questions/47835147/…

【解决方案2】：

上述方法不起作用，因此对于任何想要在 ember 应用程序上获得地图建议的人，请遵循此 https://www.npmjs.com/package/ember-cli-g-maps

效果很好。

【讨论】：