zone-example.js

import 'zone.js/dist/zone';

const loadZone = Zone.current.fork({
  name: "seokju zone",
  onScheduleTask(parent, current, target, task) {
    console.log('Schedule  ' + task.source, task);
    parent.scheduleTask(target, task);
  },
  onInvokeTask(parent, current, target, task) {
    console.log('Invoking ' + task.source, task);
    parent.invokeTask(target, task);
  },
  onHasTask(parent, current, target, hasTask) {
    if (hasTask.macroTask) {
      console.log("MacroTask 존재");
    } else {
      console.log("모든 MacroTask 끝남");
    }
  }
});

window.onload = loadZone.wrap(e => {
  // (1)

  fetch("http://localhost:3000/banking/products").then(res => {
    // (2)

    return processBody(res).then(data => {
      // (5)

      const dialog = document.createElement('dialog');
      dialog.innerHTML = `Here's some cool data: ${data} <button>OK, cool</button>`;
      document.body.appendChild(dialog);

      dialog.show();
      dialog.querySelector("button").onclick = () => {
        // (6)
        dialog.close();
      };
    });
  });
});

function processBody(res) {
  // (3)

  return res.text().then(text => {
    // (4)
    return text.slice(10) + '...';
  });
}