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標頭，因此瀏覽器不允許您的網站訪問響應 。 這是一項重要的安全功能。