前言

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

<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...