在路由器模型中调用多个 ajax 时未捕获（承诺）

Question

我在 ember 路由器模型中调用多个 API 端点我正在使用 ember-cli 3.11.0 当我刷新页面时，它无法加载 "Uncaught (in promise)"，具体在 $.ajax 中调用

import $ from 'jquery';
import { hash } from 'rsvp';

export default Route.extend(AuthenticatedRouteMixin, {
  model: function (param) {
    return hash({
      category: $.ajax({
        url: 'http://localhost:8000/catalog/category/' + param.id,
        type: 'GET'
      }).then(function(res) {
        return res;
      }),
      categories: $.ajax({
        url: 'http://localhost:8000/catalog/category',
        type: 'GET'
      }).then(function(res) {
        return res;
      })
    })
  }
});

使用这些代码，我想在 setupController 中调用类似

的东西

setupController(ctrl, model) {
   console.log(model.category);
   console.log(model.categories);
}

Answer 1

Ola @ave 感谢您的提问！

正如@jelhan 在给您的评论中提到的，建议您现在使用 fetch，因为它比使用 [=33 中的 $.ajax() 更现代 API =].

如果您需要支持 IE11 等较旧的浏览器，我建议您按照 https://github.com/ember-cli/ember-fetch 上的 README 说明安装 ember-fetch，基本上就是以下内容：

ember install ember-fetch

然后您可以将示例更新为以下内容：

import Route from '@ember/routing/route';
import fetch from 'fetch';
import { hash } from 'rsvp';

export default Route.extend(AuthenticatedRouteMixin, {
  model(param) {
    return hash({
      category: fetch('http://localhost:8000/catalog/category/' + param.id)
        .then((res) => res.json()),
      categories: fetch('http://localhost:8000/catalog/category')
        .then((res) => res.json()),
    })
  }
});

现在对于您的实际错误，我想您在 "Uncaught (in promise)" 中看到的错误实际上是这些请求之一由于某种原因而失败我建议在 [= 之后添加一个错误页面16=] 并且模板包含以下内容

{{log 'my error' model}}

这将有效地 console.log() 您从路线返回的错误，您将获得有关错误的更多信息

在路由器模型中调用多个 ajax 时未捕获（承诺）

Uncaught (in promise) when calling multiple ajax within router model

ember.js

ember-cli