// tsconfig.json
// // you must declare dom lib in tsconfig to execute browser fucntion
{
  "compilerOptions": {
    "lib": [..., "DOM"],
  }
}

// fetch.ts
window.onload = function () {
  // First fetch for page body
  fetch('../NameOfController/method1').then((response) => {
    response.text().then((data) => {
      document.getElementById('DivID1')!.innerHTML = data;
    });
    // use Promise.all to get parallel fetching data
    this.Promise.all([
      fetch('../NameOfController/method2'),
      fetch('../NameOfController/method3'),
      fetch('../NameOfController/method4'),
    ]).then(([response1, response2, response3]) => {
      response1.text().then(() => {
        //
      });
      response2.text().then(() => {
        //
      });
      response3.text().then(() => {
        //
      });
    });
  }).catch((error) => {
    this.console.error(error);
  });
};

or

DivID1 don’t exist

The problem here is the fetch requests are executed asynchronously.

Since the completion of first request produces some outcome, which is mandatory for other requests.

You have to make sure the other 3 requests are executed only when first is complete.

For example –
consider the case where 1st request is no completed and 3rd request is completed, but 3rd requests uses document.getElementById("DivID3") and DivID3 is not available yet. So it will throw an error and you have to catch the error by placing a catch block, else it TS will complain by throwing uncaught (in promise) type error.

To resolve this and this to work fine, follow the below code –

window.onload = function() {

  // First fetch for page body
  fetch('../NameOfController/method1')
    .then((response) => {
      response.text().then((data) => {
        document.getElementById("DivID1")!.innerHTML = data;

  // Inside body Div1
  fetch('../NameOfController/method2')
    .then((response) => {
      response.text().then((data) => {
        document.getElementById("DivID2")!.innerHTML = data;
      });
    });

  // Inside body Div2
  fetch('../NameOfController/method3')
    .then((response) => {
      response.text().then((data) => {
        document.getElementById("DivID3")!.innerHTML = data;
      });
    });

  // Inside body Div3
  fetch('../NameOfController/method4')
    .then((response) => {
      response.text().then((data) => {
        document.getElementById("DivID4")!.innerHTML = data;
      });
    });

      });
    }).catch((error) => { 
        console.log(error); 
    });

};

I using multiple fetch to get data from controller and load into view components. Here is my Typescript code.

window.onload = function() {

  // First fetch for page body
  fetch('../NameOfController/method1')
    .then((response) => {
      response.text().then((data) => {
        document.getElementById("DivID1")!.innerHTML = data;
      });
    });

  // Inside body Div1
  fetch('../NameOfController/method2')
    .then((response) => {
      response.text().then((data) => {
        document.getElementById("DivID2")!.innerHTML = data;
      });
    });

  // Inside body Div2
  fetch('../NameOfController/method3')
    .then((response) => {
      response.text().then((data) => {
        document.getElementById("DivID3")!.innerHTML = data;
      });
    });

  // Inside body Div3
  fetch('../NameOfController/method4')
    .then((response) => {
      response.text().then((data) => {
        document.getElementById("DivID4")!.innerHTML = data;
      });
    });
};

I have created 4 view components, which is called by the NameOfController controller. First fetch gets the data which displays the body of my page. Something is like given below.

<div id="DivID2">
</div>

<div id="DivID3">
</div>

<div id="DivID4">
</div>

Then, other 3 fetch gets data for the respective ids. My code is working fine when I removed first fetch and statically used html code as above and when I used first fetch I got uncaught (in promise) type error in TypeScript. I dont know where am I wrong. Please help.