How can I make a multiple Fetch Call in Ui5?-CodePudding

Hi I want to call these Fetch calls all together at the same time, so I have Tablets, Smartphones & Notebooks displayed. How do I do this? I tryed something with Async Function but it didnt worked out.

The Code:

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")

                })

            },

CodePudding user response：

You already have the requests running at the same time asynchronously.

I assume you want to set the data model once with the data from all three requests. In that case, I think using Promise.all to combine all your fetch promises would be a good solution.

Make sure to flatten the response from the combined promise in order to create a single array with <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");
});