关于angular:Async-Pipe

前言

之前在写我的项目的时候援用某个管道的时候

<td>{{house | housePlace}}

发现成果不是想要的，而是如下图的成果，并没有显示出正确的地址!

参考我的项目中的代码发现须要加上 async 管道
<td>{{house | housePlace | async}}

为了了解该管道作用，于是有了本文，并便于当前查看。

Async Pipe

在代码正文中 AsyncPipe 是这样形容的：

The async pipe subscribes to an Observable or Promise and  returns 
the latest value it has emitted. When a new value is emitted, the async 
pipe marks the component to be checked for changes. When the component 
gets destroyed, the async pipe unsubscribes automatically to avoid potential 
memory leaks.

也就是说这个 Async 异步管道会订阅一个Observable 或 Promise，并返回它收回的最新值。当收回新值时，Async 管道会标记组件以进行更改。当组件被销毁时，Async 管道会主动勾销订阅，以防止潜在的内存透露。

并且它有几个特点：（起源 google）1.Async Pipe makes the rendering of data from observable and promise easier.
2.For promises, it automatically calls the then method.
3.For observables, it automatically calls subscribe and unsubscribe.

也就是说 async 管道使得从 Observable 的和 Observable 或 Promise 的数据更容易出现，
并且 对于 observables 来说，它会主动调用 subscribe 和 unsubscribe；
对于 Promise 来说，它会主动调用 then 办法。

所以起因找到了

因为 <td>{{house | housePlace}} 中 housePlace 管道中返回的是这个：return this.observable;

如果没有调用 async 管道的话 ，V 层就会间接显示 observable，它的源类型是 object，于是 V 层就间接显示[object, object] 的模式.

若调用了 async 管道的话，对于这个 obsevable, 它会主动调用 subscribe 和 unsubscribe, 如果 housePlace 管道收回新的值，那么async 管道就会标记组件以进行更改，并在 V 层中显示这个值。

对于 observable 和 subscribe 之前我有肯定的理解。然而对于 Promise 来说根本没有意识。于是查阅了相干材料。

Promise

MDN 上的解释:

The Promise object represents the eventual completion (or failure) of an 
asynchronous operation and its resulting value.

Promise 对象示意异步操作的最终实现（或失败）及其后果值。

Promise 是在创立时不肯定晓得值的一个对象。它能够和异步操作的最终胜利值或失败报错相关联。这让异步办法能够像同步办法一样返回值 ：异步办法 不会 立刻返回最终值，而是返回一个 promise，在将来的某个工夫点提供该值。

Promise 会处于以下 3 种状态中

1:pedding: 初始状态，既不是 fulfilled 状态也不是 rejected 状态。
2:fulfilled: 实现状态，示意操作已胜利实现。
3:rejected: 回绝状态，示意操作失败。

在 fulfilled 状态,promise 会有一个 value 值，
在 rejected 状态,promise 会有一个 reason (error) 值。

Promise 的常调用的两个办法：then(), catch();

then()函数

then 办法会 返回一个 Promise 对象 , 返回的 Promise 会成为Fulfilled 状态。
return 的值会作为新 Promise 对象下一个 then 的回调函数的参数值. 如果没有 return 则接管到的是 undefined.

实例代码

let myPromise = new Promise((fulfill, reject)=>{fulfill(10);
    })
    myPromise
      .then((value)=>{console.log(value); return value;  })
      .then((value) => {console.log(value);
      });

打印后果

这恰好阐明了 promise 的链式调用。

上述图的意思是：当 Promise 为 fulfiled 状态或 reject 状态时，主动执行.then 函数，执行完 async 操作或 error 返回一个新的 promise, 而后持续能够链式调用上来。

.then（）办法能够传入最多两个参数：一个当为 fulfilled 状态执行，一个当 throw error 的时候执行。

p.then(value => {// fulfillment}, reason => {// rejection});

.catch()函数

catch 实际上也是 then，它用于捕捉谬误，它的参数也就是是 then 的第二个参数。它相当于 then(null, rejection)。所以，catch 中如果 return 值的话，新的 Promise 对象也会是 fulfill 状态。
它个别用于捕获谬误

const promise1 = new Promise((resolve, reject) => {throw 'Uh-oh!';});

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

执行后果

catch(）办法最多有一个参数

p.catch(function(reason) {// rejection});

一个 Function 在调用时 Promise 被回绝。这个函数有一个参数：reason 回绝理由。

参考：
MDN：catch(): https://developer.mozilla.org…
MDN: then():https://developer.mozilla.org…
MDN: Promise:https://developer.mozilla.org…