16、深入探索Angular：多源数据异步加载与组件分离实践

深入探索Angular：多源数据异步加载与组件分离实践

1. 项目现状与目标

在当前的开发进程中，我们已经设计并构建好了用户界面（UI），后端也变得简洁、高效。然而，目前的应用还存在一个问题，即没有获取信用卡信息，这使得功能尚未完全完善。接下来，我们的目标是在Angular应用中整合前后端，为用户呈现完整的客户详细信息，特别是添加信用卡信息到客户详情视图中。

2. 异步请求与可观察对象

2.1 异步请求的必要性

在JavaScript编程中，与服务器通信并非瞬间完成。如果采用同步请求，浏览器会在等待网络响应时被挂起，导致用户体验变差。为避免这种情况，我们需要使用异步请求，让代码在后台进行网络请求的同时，主线程和浏览器能够继续运行。

例如，以下代码展示了异步请求的示例：

var base = "http://billing.example.com"
self.http.get(base + "/cardholder/123").subscribe(function(response) {
    alert("Got card details!");
});
self.http.get("/customer/123.json").subscribe(function(response) {
    alert("Got customer!");
});
alert("Requests sent!");

这段代码看似按顺序执行，但实际上并非如此。在第一个Ajax请求发起后，代码会继续执行后续的请求，而响应的处理