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")
})
},
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");
});