ember.js - Ember中异步的一些问题

Question

一段时间以来，我一直在使用 emberjs，现在我想加深对 ember 本质的理解。

问题 1.我认为路由的 model() Hook 是编写异步代码(以获取所有需要的数据)的最佳位置，我说得对吗？我应该尝试将我所有的网络请求(或至少其中的大部分)放在路由的模型中吗？

问题 2。组件 Hook 具有同步特性。这是否意味着在钩子(Hook)中编写异步代码是一个错误的决定？

说，我有异步 init() Hook ，其中计算了一些数据，didRender() Hook 我希望使用该数据。当 ember 调用 init() 时，它会返回一个 Promise，因此它会从堆栈移动到一个特殊的队列，并且 ember 不会等到事件循环将该代码返回到堆栈。所以 ember 运行下一个钩子(Hook)，当 didRender() 正在执行时，init() 钩子(Hook)可能没有完成，预期的数据可能不存在。是吗？

问题 3.服务 Hook 也应该是同步的。因为当服务被注入(inject)到组件中并被使用时，ember 也不会等到异步 Hook 完成。

比如说，我有一个带有 products 属性的购物车服务。产品 ID 存储在本地存储中，我想从服务器获取这些产品以将它们设置到 products 属性中。

import Service from '@ember/service';
import { A } from '@ember/array';
import { inject as service } from '@ember/service';

export default Service.extend({
    store: service(),

    init(...args) {
        this._super(args);
        this.set('products', A());
    },

    async loadProducts() {
        const cartProducts = A();
        const savedCartProducts = localStorage.getItem('cartProducts');
        if (savedCartProducts) {
            const parsedSavedCartProducts = JSON.parse(savedCartProducts);
            const ids = Object.keys(parsedSavedCartProducts);
            if (ids.length > 0) {
                const products = await this.store.query('product', {id: Object.keys(parsedSavedCartProducts)});
                products.forEach(p => {
                    p.set('cartQuantity', Number(parsedSavedCartProducts[p.id].qty));
                    cartProducts.pushObject(p);
                });
            }
        }
        this.products.pushObjects(cartProducts);
    },
  ...
});

如果我从服务的 init() 调用 loadProducts() 我不能在 controllers 中使用 this.cart.products/application.js，例如。因为服务已经准备好了，但是 async init() 还在执行。那么，我应该在 routes/application.js model() hook 中调用它吗？

问题 4.如果有一些通用组件不引用任何路由，但该组件需要来自服务器的一些数据，我应该在哪里发出异步请求？还是计算属性和观察者是唯一的解决方案？

非常感谢。

Answer 1

这里的问题很好，你的方向是正确的!

问题 1:是的，一般的经验法则是，在您熟悉事物之前，在路由 Hook (beforeModel、model 和 afterModel) 让我们更容易思考正在发生的事情。最终您可能希望开始调整默认值以满足您的自定义 UI 需求，但从这条规则开始是最简单的

问题 2-4:您在这里问了几个关于异步代码的问题，因此将在这里更广泛地回答。

首先，服务可以异步或不异步，但除非您从钩子(Hook)(如路由钩子(Hook))调用这些方法，否则您负责处理异步结果。例如，Ember 数据存储是一种确实异步返回数据的服务

但是，如果您遇到确实需要在组件中执行异步的情况，推荐的插件是 Ember Concurrency:http://ember-concurrency.com/docs/introduction/

Ember Concurrency 有助于解决您尚未遇到的许多异步错误和边缘情况，但如果您开始在组件中执行异步代码，将会遇到这些问题。所以我强烈建议多了解一下。

祝你好运!