Ошибка при использовании множественной выборки в TypeScript - PullRequest
Новая
       47

Ошибка при использовании множественной выборки в TypeScript

0 голосов
/ 25 мая 2020

Я использую множественную выборку для получения данных из контроллера и загрузки в компоненты представления. Вот мой код 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 компонента представления, которые вызываются контроллером NameOfController. Первая выборка получает данные, которые отображают тело моей страницы. Примерно так, как показано ниже. 

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

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

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

Затем другие 3 выборки получают данные для соответствующих идентификаторов. Мой код работает нормально, когда я удалил первую выборку и статически использовал код html, как указано выше, и когда я использовал первую выборку, я получил ошибку типа uncaught (в обещании) в TypeScript. Не знаю, где я ошибаюсь. Пожалуйста, помогите.

Ответы [ 2 ]

1 голос
/ 25 мая 2020 

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

или

DivID1 не существует

1 голос
/ 25 мая 2020

Проблема здесь в том, что запросы на выборку выполняются асинхронно.

Поскольку завершение первого запроса дает некоторый результат, который является обязательным для других запросов.

Вы должны убедиться, что другой 3 запроса выполняются только после завершения первого.

Например - рассмотрим случай, когда 1-й запрос не завершен, а 3-й запрос завершен, но 3-й запрос использует document.getElementById("DivID3") и DivID3 еще недоступен. Таким образом, он выдаст ошибку, и вы должны отловить ошибку, поместив блок catch, иначе TS будет жаловаться, выбрасывая ошибку типа uncaught (в обещании).

Чтобы решить эту проблему, и это работает нормально, выполните приведенный ниже код - 

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

};
...