ExtJS：如何在 initComponent 方法中等待 Promise 响应？答案

【问题标题】：ExtJS: How to waiting for Promise response in initComponent method?ExtJS：如何在 initComponent 方法中等待 Promise 响应？
【发布时间】：2018-08-07 16:42:38
【问题描述】：

我已经为Container 类实现了initComponent 方法，并通过Promise 方法加载items 配置。

debugging 期间的东西首先转到callParent 行，然后执行转到Promise 方法。我必须重新加载浏览器才能获取Promise 响应。

我在initComponent 中尝试过then() 方法，但报错。我怎样才能达到这种用法？

- 带有initComponent 的容器类；

Ext.define('MyApp.view.Bar', {
    extend: 'Ext.container.Container',
    xtype: 'barview',
    requires: [],
    controller: 'barctrl',
    viewModel: {
        type: 'barvm'
    },

    initComponent: function () {
        let me = this;
        let fooInfo = MyApp.FooInfoClass.getFooInfo(); //There is a debugger in FooInfoClass but miss this one

        if (fooInfo) {
            if (fooInfo.self) {
                me.items = [
                    {
                        xtype: 'componentA'
                    }
                ];
            } else if (fooInfo.reference) {
                me.items = [
                    {
                        xtype: 'componentB'
                    }
                ];
            } else {
                me.items = [
                    {
                        xtype: 'componentC'
                    }
                ];
            }
        }

        debugger //Firstly comes to this one then goes to Promise 
        me.callParent(arguments);
    }
});

- Promise 类和方法；

Ext.define('MyApp.FooInfoClass', {
    requires: [],
    singleton: true,
    endpoint: MyApp.Url(),

    getFooInfo: function () {
        let me = this;
        let responseInfo = localStorage.getItem('foo-info');

        return JSON.parse(responseInfo);
    },

    setFooInfo: function (foo) {
        let me = this;

        me.foo = JSON.stringify(foo);
        localStorage.setItem(me.fooInfo, me.foo);
    },

    fooInfo: function () {
        let me = this;

        return new Ext.Promise(function (resolve, reject) {
            Ext.Ajax.request({
                url: me.endpoint + '/info',

                success: function(response, opts) {
                    let obj = Ext.decode(response.responseText);
                    let data = obj.data[0];
                    debugger //Secondly comes to here!
                    me.foo = data;
                    me.setFooInfo(me.foo);
                    resolve(me.foo);
                },

                failure: function(response, opts) {
                    console.log('server-side failure with status code ' + response);
                    reject(response);
                }
            });
        });
    }
});

【问题讨论】：

标签： javascript extjs promise containers response

【解决方案1】：

您不应推迟完成initComponent 函数，直到获得所需数据。您可以先获取数据并在所有需要的信息一起实例化组件（在Promise.then() 中执行Ext.create()），或者让组件获取所需的信息并在运行时添加子组件基于这些信息。在initComponent 上致电callParent 之前，您真正必须了解的事情非常少。

如果我是你，而不是使用 me.items = ，我会使用 me.add() 以便在初始化之后在运行时添加子组件。

我为你做了一个简单的小提琴：https://fiddle.sencha.com/#view/editor&fiddle/2k9r

【讨论】：

me.add 没有像预期的那样对我有用，但我完全明白了你的想法，现在我的使用更加强大。谢谢。