ajax请求ember通过组件

Question

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

预测-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');
      }
    });

天气-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);
    });
  }
});

json回复

{

    "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
    }

}

天气-display.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+ 兼容。

可能您正在使用 jQuery 之前的版本 3.0，这意味着您必须将 Deferred 转换为 Promise，这可以通过 [=17] 完成=].

但这不是你的问题！

你的实际问题

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

XMLHttpRequest cannot load https://api.darksky.net/forecast/22b106924ed7e3bcde76608f7f064585/46.9483,7.4515?exclude=minutely,hourly,daily,flags&units=si. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

这是因为darksky有disabled CORS for their API。这意味着您无法直接从in-Browser JavaScript访问API。

你必须请求你自己的 Web 服务器，然后它可以向 darksky 请求 API。

请check the references about CORS.

但是开发工具或 HTTP 调试器中的请求 returns `200 OK`

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

ajax请求ember通过组件

ajax request ember passing through component

javascript

json

ember.js

ember-controllers

ember-components

你的实际问题

但是开发工具或 HTTP 调试器中的请求 returns `200 OK`

ajax请求ember通过组件

ajax request ember passing through component

javascript

json

ember.js

ember-controllers

ember-components

你的实际问题

但是开发工具或 HTTP 调试器中的请求 returns 200 OK

但是开发工具或 HTTP 调试器中的请求 returns `200 OK`