Ember.js 在我的组件中的操作中使用fetch

我对如何实现这一点很好奇，我不希望每次页面加载到路由上时都点击这个API，而是希望启动对某个操作的调用（我想这个操作可以去任何地方，但它当前在一个组件中）。我得到了服务器响应，但在获取组件/模板中的数据时遇到了问题。有什么想法吗？如果我在错误的轨道上，请忽略我的self.set属性…下面的代码..谢谢

import Component from '@ember/component';

export default Component.extend({
  res: null,
  actions: {
    searchFlight(term) {
      let self = this;
      let url = `https://test.api.amadeus.com/v1/shopping/flight-offers?origin=PAR&destination=LON&departureDate=2018-09-25&returnDate=2018-09-28&adults=1&travelClass=BUSINESS&nonStop=true&max=2`;
      return fetch(url, {
        headers: {
          'Content-Type': 'application/vnd.amadeus+json',
          'Authorization':'Bearer JO5Wxxxxxxxxx'
        }
      }).then(function(response) {
        self.set('res', response.json());
        return response.json();
      });
    }
  }
});

在下面解决

import Component from '@ember/component';

export default Component.extend({
  flightResults: null,
  actions: {
    searchFlight(term) {
      let self = this;
      let url = `https://test.api.amadeus.com/v1/shopping/flight-offers?origin=PAR&destination=LON&departureDate=2018-09-25&returnDate=2018-09-28&adults=1&travelClass=BUSINESS&nonStop=true&max=2`;
      return fetch(url, {
        headers: {
          'Content-Type': 'application/vnd.amadeus+json',
          'Authorization':'Bearer xxxxxxxxxxxxxx'
        }
      }).then(function(response) {
        return response.json();
      }).then(flightResults => {
        this.set('flightResults', flightResults);
      });
    }
  }
});

---

您可能会发现ember并发在这种情况下很有用。请参见“提前键入搜索”的，针对您的示例进行了修改：

const DEBOUNCE_MS = 250;
export default Controller.extend({
  flightResults: null;
  actions: {
    searchFlight(term) {
    this.set('flightResults', this.searchRepo(term));
    }
  },
  searchRepo: task(function * (term) {
    if (isBlank(term)) { return []; }

    // Pause here for DEBOUNCE_MS milliseconds. Because this
    // task is `restartable`, if the user starts typing again,
    // the current search will be canceled at this point and
    // start over from the beginning. This is the
    // ember-concurrency way of debouncing a task.
    yield timeout(DEBOUNCE_MS);

    let url = `https://test.api.amadeus.com/v1/shopping/flight-offers?origin=PAR&destination=LON&departureDate=2018-09-25&returnDate=2018-09-28&adults=1&travelClass=BUSINESS&nonStop=true&max=2`;

    // We yield an AJAX request and wait for it to complete. If the task
    // is restarted before this request completes, the XHR request
    // is aborted (open the inspector and see for yourself :)
    let json = yield this.get('getJSON').perform(url);
    return json;
  }).restartable(),

  getJSON: task(function * (url) {
    let xhr;
    try {
      xhr = $.getJSON(url);
      let result = yield xhr.promise();
      return result;

      // NOTE: could also write this as
      // return yield xhr;
      //
      // either way, the important thing is to yield before returning
      // so that the `finally` block doesn't run until after the
      // promise resolves (or the task is canceled).
    } finally {
      xhr.abort();
    }
  }),
});

---

在调用this.set之前，您可能需要检查组件是否已销毁。