Ajax请求余烬通过组件

Question

我只是想从组件的余烬服务中的json请求中获取价值。 这是我的代码

Forecast-weather.js（服务）

import Ember from 'ember';  
    export default Ember.Service.extend({
      findWeatherCurrent:function (lat,lng) {
        return Ember.$.getJSON('https://api.darksky.net/forecast/22b106924ed7e3bcde76608f7f064585/'+ lat +','+lng+'?exclude=minutely,hourly,daily,flags&units=si');
      },
      findWeatherDaily:function (lat,lng) {
        return Ember.$.getJSON('https://api.darksky.net/forecast/22b106924ed7e3bcde76608f7f064585/'+ lat +','+lng+'?exclude=minutely,hourly,currently,flags&units=si');
      },
      findWeatherHourly:function (lat,lng) {
        return Ember.$.getJSON('https://api.darksky.net/forecast/22b106924ed7e3bcde76608f7f064585/'+ lat +','+lng+'?exclude=minutely,daily,currently,flags&units=si');
      }
    });

weather-display.js（组件）

import Ember from 'ember';

export default Ember.Component.extend({
  forecastWeather:Ember.inject.service(),
  willRender(){
    let lat = this.get('lat');
    let lng = this.get('lng');
    this.get('forecastWeather').findWeatherCurrent(lat,lng).then(data => {
      this.set('currents', data);
      console.log(data);
    });
  }
});

jsonRespon

{

    "latitude": 37.8267,
    "longitude": -122.4233,
    "timezone": "America/Los_Angeles",
    "offset": -7,
    "currently": {
        "time": 1489488513,
        "summary": "Clear",
        "icon": "clear-night",
        "nearestStormDistance": 47,
        "nearestStormBearing": 87,
        "precipIntensity": 0,
        "precipProbability": 0,
        "temperature": 13.54,
        "apparentTemperature": 13.54,
        "dewPoint": 8.59,
        "humidity": 0.72,
        "windSpeed": 0.87,
        "windBearing": 46,
        "visibility": 12.46,
        "cloudCover": 0.08,
        "pressure": 1016.58,
        "ozone": 279.62
    }

}

天气显示

<p id="word_on_change" class="font_black font-white word">{{currents.currently.windSpeed}}</p>

我只是想将该windspeed值从json传递到hbs模板，但是它不起作用。 谁能解决这个问题:(

Answer 1

要处理$.getJSON的结果，了解您的jQuery版本很重要。 jQuery 3最重要的变化之一就是jQuery.Deferred现在与Promises / A +兼容。

可能您使用的是jQuery 3.0之前的3.0 ，这意味着您必须将Deferred转换为Promise ，可以使用Ember.RSVP.resolve() 。

但是，这不是您的问题 ！

你的实际问题

首先，我对您的代码进行了细微的修改 。 考虑下次自己做；-)。 在控制台中，您会看到错误：

XMLHttpRequest无法加载https://api.darksky.net/forecast/22b106924ed7e3bcde76608f7f064585/46.9483,7.4515?exclude=分钟，每小时，每日，flags ＆ units = si 。 所请求的资源上没有“ Access-Control-Allow-Origin”标头。 因此，不允许访问原始“空”。

这是因为darksky已禁用其API的CORS 。 这意味着您不能直接从浏览器内的JavaScript访问API 。

您必须请求自己的Web服务器，然后Web服务器才能对darksky API进行请求。

请检查有关CORS的参考 。

但是请求在开发工具或HTTP调试器中返回200 OK

是。 这就是CORS的工作方式。 数据已由应用程序成功返回到浏览器，但是由于缺少CORS标头，因此浏览器不允许您的网站访问响应 。 这是一项重要的安全功能。