Angular7 獲取非同步方法裡面的資料

1.**函式

getname() 
getasyncname() , 
1000
);  }

這是我們定義好的兩個函式，當呼叫這兩個函式的時候，因為settimeout是非同步的，所以並不能正常返回值，補全返回型別可以使我們更加直觀的看出效果。

getname(): string
getasyncname(): 
void

console.log(this.getname()); //輸出：張三

console.log(this.getasyncname()); //輸出：undefined

這時候，要獲取返回值，就需要使用**函式，將getasyncname（）修改成

getasyncname(back) , 
1000
);  }

呼叫

this.getasyncname((data) =>);
成功輸出：async_張三

2.promise處理非同步

getpromisedata() , 
1000
);    });
}ps：error為失敗**函式，可以不寫

呼叫

this.getpromisedata().then((data) =>);

3.observable（整合在rxjs模組）

import  from
'rxjs
';

getobservabledata() , 
1000
);    });
}ps：失敗**為
obserber.error（'失敗'）；

呼叫

this.getobservabledata().subscribe((data) =>);

可見promise和observable非常相似

（observable強大一點，可以取消訂閱、迴圈監聽、提供多種工具函式）

a.取消訂閱

const d = this.getobservabledata().subscribe((data) =>);
d.unsubscribe(); 
//取消訂閱

由於getobservabledata方法是一秒後執行的，程式獲得返回值之前執行了取消訂閱，所以這裡將不列印出結果

b.迴圈監聽

先寫乙個非同步迴圈函式，每隔一秒返回乙個值

getobservable_interval_data() , 
1000
);    });
}

呼叫

this.getobservable_interval_data().subscribe((data) =>);

結果：每隔一秒列印乙個值

c.工具函式（pip管道，filter過濾器，map操作）

我們先寫乙個方法，從1開始遞增列印

getobservable_num_data() , 
1000
);    });
}

呼叫

this.getobservable_num_data().subscribe((data) =>);

好，這很容易，前面也提到過了，但是現在我們不改變原本的函式，但是只要列印偶數呢（對值進行篩選）

import  from
'rxjs/operators
';

修改函式如下：

this
.getobservable_num_data()
.pipe(
filter((value: number) =>}))
.subscribe((data) =>);

現在我們要列印值的二次冪呢（對值進行操作）

import  from
'rxjs/operators
';

修改函式如下：

this
.getobservable_num_data()
.pipe(
map((value: number) =>)
).subscribe((data) =>);

還有，就是補充一點，pipe管道可以對值進行多次操作，用逗號隔開，執行順序從上到下

如：

this
.getobservable_num_data()
.pipe(
filter((value: number) =>
}),map((value: number) =>),
map((value: number) =>)
).subscribe((data) =>);

Angular7上手體驗

檢視當前你的node版本可以在cmd中輸入開發工具強烈推薦用cli命令建立 ng7demo 這裡前面我用ng7 demo的時候報錯應該是不能用下劃線這裡誇獎下,7加入了cli prompts 建立的時候可以選是否啟用router 及 css用scss,sass等暫時只有這2個prompts...

Angular 7 學習資料（1）

angular 是乙個用 html 和 typescript 構建客戶端應用的平台與框架。angular 本身就是用 typescript 寫成的。它將核心功能和可選功能作為一組 typescript 庫進行實現，你可以把它們匯入你的應用中。angular 的基本構造塊是 ngmodule，它為元件...

Angular 7 自學總結 1

個人理解angular 建立乙個專案專案目錄結構分析主要需要知道的檔案建立元件如何在其他頁面復用元件？在新建立的元件中的news.component.ts檔案中，有乙個selector屬性就是名字，如果需要呼叫只需要在其他頁面中寫入即可，這樣頁面量少復用率高。component 定義資...

Angular7 獲取非同步方法裡面的資料

Angular7上手體驗

Angular 7 學習資料 （1）

Angular 7 自學總結 1

相關推薦

Angular 7 學習資料（1）