Javascript 在TypeScript中使用多个获取时出错

我使用多次提取从控制器获取数据并加载到视图组件中。这是我的打字脚本代码

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

我已经创建了4个视图组件，它们被命名为controller controller。First fetch获取显示页面主体的数据。下面给出了一些类似的例子

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

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

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

---

然后，其他3个fetch获取各自id的数据。当我删除第一个fetch和上面静态使用的html代码时，我的代码工作正常；当我使用第一个fetch时，我在TypeScript中得到了uncaught（in promise）type error。我不知道我哪里错了。请提供帮助。

这里的问题是获取请求是异步执行的

因为第一个请求的完成会产生一些结果，这对于其他请求是强制性的

您必须确保其他3个请求仅在第一个请求完成时执行

例如— 考虑第一请求未完成和第三请求完成的情况，但是第三个请求使用<代码>文档。GETELMENTYBID（“除法3”）和 DIAL3尚未可用。因此，它将抛出一个错误，您必须通过放置catch块来捕获错误，否则它将通过抛出uncaught（in promise）类型的错误来抱怨

要解决此问题并使其正常工作，请遵循以下代码-

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

};

---

这里的问题是获取请求是异步执行的

因为第一个请求的完成会产生一些结果，这对于其他请求是强制性的

您必须确保其他3个请求仅在第一个请求完成时执行

例如— 考虑第一请求未完成和第三请求完成的情况，但是第三个请求使用<代码>文档。GETELMENTYBID（“除法3”）和 DIAL3尚未可用。因此，它将抛出一个错误，您必须通过放置catch块来捕获错误，否则它将通过抛出uncaught（in promise）类型的错误来抱怨

要解决此问题并使其正常工作，请遵循以下代码-

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

};

//tsconfig.json
////必须在tsconfig中声明dom lib才能执行浏览器功能
{
“编译器选项”：{
“lib”：[…，“DOM”]，
}
}
//取回
window.onload=函数（）{
//页面正文的第一次获取
获取（'../NameOfController/method1'）。然后（（响应）=>{
response.text（）。然后（（数据）=>{
document.getElementById（'DivID1'）！.innerHTML=data；
});
//使用Promise.all获取并行提取数据
这是我的承诺([
获取（'../NameOfController/method2'），
获取（'../NameOfController/method3'），
获取（'../NameOfController/method4'），
]).然后（[response1，response2，response3]）=>{
response1.text（）。然后（（）=>{
//
});
response2.text（）。然后（（）=>{
//
});
响应3.text（）。然后（（）=>{
//
});
});
}).catch（（错误）=>{
this.console.error（错误）；
});
};
//tsconfig.json
////必须在tsconfig中声明dom lib才能执行浏览器功能
{
“编译器选项”：{
“lib”：[…，“DOM”]，
}
}
//取回
window.onload=函数（）{
//页面正文的第一次获取
获取（'../NameOfController/method1'）。然后（（响应）=>{
response.text（）。然后（（数据）=>{
document.getElementById（'DivID1'）！.innerHTML=data；
});
//使用Promise.all获取并行提取数据
这是我的承诺([
获取（'../NameOfController/method2'），
获取（'../NameOfController/method3'），
获取（'../NameOfController/method4'），
]).然后（[response1，response2，response3]）=>{
response1.text（）。然后（（）=>{
//
});
response2.text（）。然后（（）=>{
//
});
响应3.text（）。然后（（）=>{
//
});
});
}).catch（（错误）=>{
this.console.error（错误）；
});
};
将
catch
语句添加到您的第一次提取中，并记录错误，以了解产生错误的原因。
我不知道我错在哪里
您不能保证第一次
fetch
在其他提取之前解决。将
catch
语句添加到您的第一次提取中，并记录错误，以了解原因错误首先产生。
我不知道我错在哪里
您不能保证第一个
获取
在其他获取之前解决。另外，在最后使用
.catch（（error）=>{console.log（error）；}）适当地捕获错误我发现您无法将属性“innerHTML”设置为null错误。但它是随机变化的。控制器有可能产生错误，并在这里被捕获。验证控制器逻辑是有意义的。我验证了逻辑，但在控制器中没有发现任何错误。我仍在获取仪表板。ts:34未捕获（承诺中）TypeError:无法将属性“innerHTML”设置为null error。能否为每个获取添加catch语句，以便我们清楚错误的实际来源？或者Dashboard.ts中的第34行是哪一行？另外，通过使用
.catch（（error）=>{console.log（error）；}）适当地捕捉末尾的错误我发现您无法将属性“innerHTML”设置为null错误。但它是随机变化的。控制器有可能产生错误，并在这里被捕获。验证控制器逻辑是有意义的。我验证了逻辑，但在控制器中没有发现任何错误。我仍在获取仪表板。ts:34未捕获（承诺中）TypeError:无法将属性“innerHTML”设置为null error。能否为每个获取添加catch语句，以便我们清楚错误的实际来源？或者Dashboard.ts中的第34行是哪一行？