ajax请求ember通过组件

Question

我只想从组件的 ember 服务中的 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
    }

}

天气显示.hbs

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

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

Answer 1

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

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

然而，这不是你的问题！

你的实际问题

首先我建立了一个twiddle with your code。下次考虑自己做这个;-)。 你会在控制台中看到错误：

XMLHttpRequest 无法加载 https://api.darksky.net/forecast/22b106924ed7e3bcde76608f7f064585/46.9483,7.4515?exclude=minutely,hourly,daily,flags&units=si。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此不允许访问 Origin 'null'。

这是因为darksky 有disabled CORS for their API。这意味着您无法直接从浏览器内的 JavaScript 访问 API。

您必须请求您自己的 Web 服务器，然后它才能向 darksky API 发出请求。

请check the references about CORS。

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

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