如何在 Ui5 中进行多次提取调用？

Question

您好，我想同时调用这些 Fetch 调用，所以我显示了平板电脑、智能手机和笔记本电脑。我该怎么做呢？我用异步函数尝试了一些东西，但没有成功。

代码：

onInit: function () {

                const tabletUrl = '/api/tablets?limit=1000&offset=0';

                fetch(tabletUrl).then(res => res.json()).then(res => {
                    const dataModel = new JSONModel();
                    dataModel.setData({
                        items: res
                    });
                    this.getView().setModel(dataModel, "aribadevices")

                })

                const notebookUrl = '/api/notebooks?limit=1000&offset=0';

                fetch(notebookUrl).then(res => res.json()).then(res => {
                    const dataModel = new JSONModel();
                    dataModel.setData({
                        items: res
                    });
                    this.getView().setModel(dataModel, "aribadevices")

                })

                const smartphonesUrl = '/api/smartphones?limit=1000&offset=0';

                fetch(smartphonesUrl).then(res => res.json()).then(res => {
                    const dataModel = new JSONModel();
                    dataModel.setData({
                        items: res
                    });
                    this.getView().setModel(dataModel, "aribadevices")

                })

            },

Answer 1

您已经有运行个异步请求。

我假设您想使用来自所有三个请求的数据设置一次数据模型。在那种情况下，我认为使用 Promise.all 组合所有的获取承诺将是一个很好的解决方案。

确保将组合承诺的响应展平，以便创建具有 <Array>.flat 的单个数组。

const tabletUrl = '/api/tablets?limit=1000&offset=0';
const notebookUrl = '/api/notebooks?limit=1000&offset=0';
const smartphonesUrl = '/api/smartphones?limit=1000&offset=0';

Promise.all([fetch(tabletUrl), fetch(notebookUrl), fetch(smartphonesUrl)]).then(res => Promise.all(res.map(r => r.json()))).then(data => {
    const dataModel = new JSONModel();
    dataModel.setData({
        items: data.flat()
    });
    this.getView().setModel(dataModel, "aribadevices");
});

如何在 Ui5 中进行多次提取调用？

How can I make a multiple Fetch Call in Ui5?

javascript

xml

api

sapui5