NgRx 裡 first 和 take(1) 操作符的區別

i042416發表於2021-09-15

[take(1) vs first()](https://stackoverflow.com/questions/42345969/take1-vs-first)

first() 運算子采用可選的 predicate 函式，並在源完成後沒有匹配的值時發出錯誤通知。

下列程式碼會報錯：

```typescript
import { EMPTY, range } from 'rxjs';
import { first, take } from 'rxjs/operators';

EMPTY.pipe(first()).subscribe(console.log, err =>
  console.log('Jerry Error:', err)
);

```

![](https://img-blog.csdnimg.cn/img_convert/0e6badf885db1c3c1a27bf78f2a56ffc.png)

同理，下面程式碼也會報錯：

```typescript
range(1, 5).pipe(
  first(val => val > 6),
).subscribe(console.log, err => console.log('Error', err));
```

![](https://img-blog.csdnimg.cn/img_convert/fa9bedc8969a0f45661123f6855bb85b.png)

下列程式碼輸出1：

```typescript
import { EMPTY, range } from 'rxjs';
import { first, take } from 'rxjs/operators';

range(1, 5)
  .pipe(first())
  .subscribe(console.log, err => console.log('Error', err));
```

![](https://img-blog.csdnimg.cn/img_convert/bc9aa7b92c98f51dbc8b100604de5cb1.png)

另一方面， take(1) 只取第一個值並完成。不涉及進一步的邏輯。

```typescript
import { EMPTY, range } from 'rxjs';
import { first, take } from 'rxjs/operators';

EMPTY.pipe(
  take(1),
).subscribe(console.log, err => console.log('Error', err));
```

上面程式碼不會有任何輸出：

![](https://img-blog.csdnimg.cn/img_convert/453d2e14ee4061f5abcbbc58a8fc09da.png)

使用 first 操作符需謹慎，當滿足下列條件使，可以使用 first：

(1)您將發出的零項視為錯誤條件（例如，在發出之前完成）並且如果出現錯誤的可能性大於 0%，則您可以優雅地處理它
(2)或者你 100% 知道源 observable 會發出至少1個專案

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/24475491/viewspace-2792292/，如需轉載，請註明出處，否則將追究法律責任。

FIRST_ROWS和FIRST_ROWS_n的區別
2008-03-25
FIRST_ROWS和FIRST_ROWS(N)的區別 (zt)
2008-01-09
Angular Ngrx 裡 Store 和 State 的關係
2022-07-23
Angular
INSERT ALL 和INSERT FIRST 的區別
2008-09-14
:first-child與:first-of-type 區別
2018-11-28
Cache 和 Buffer 的區別在哪裡？
2019-11-22
TypeScript 裡 interface 和 type 的區別
2021-06-26
TypeScript
Rxjs 裡 Subject 和 BehaviorSubject 的區別
2021-11-07
JS
JAVA 裡static 和volatile的區別
2012-07-09
Java
Angular Ngrx store 裡的 Selector 介紹
2022-07-23
Angular
css選擇器中:first-child與:first-of-type的區別
2019-01-12
CSS
21號 first day 淺談python和c語言的區別
2019-03-22
PythonC語言
web 開發裡 SSR，CSR 和 SSG 的區別
2022-10-08
Web
docment.getelementbyid 和jquery裡的$(#'id')區別
2018-05-25
jQuery
Angular Ngrx Store 裡 State 和 Reducer 的繫結關係是如何實現的
2022-07-23
Angular
什麼是 Angular Ngrx Store 裡的 Meta-Reducer
2022-07-23
Angular
count（*）、count（1）和count（列名）的區別
2019-09-20
高仿包和1:1包區別
2021-03-03
sky-take-out chapter 1
2024-08-09
APT
CC攻擊和DD攻擊的區別在哪裡
2021-08-23
創業和打工的最本質區別在哪裡？
2020-11-13
創業
SAP ABAP CDS view 裡 INNER JOIN 和 Association 的區別
2022-12-20
View
count (*) 和 count (1) 和 count (列名) 區別
2019-10-15
count(*) 和 count(1)和count(列名)區別
2021-07-14
微信小程式和app最大區別在哪裡
2021-05-21
微信小程式APP
SQL Server中count(*)和Count(1)的區別
2021-09-09
SQLServer
Angular Ngrx Store 工具庫裡 Action 定義指南
2022-07-23
Angular
oracle知識整理(1) union和union all的區別,left join和right join的區別(各種join的區別)
2020-04-07
Oracle
聯合辦公和孵化器的區別在哪裡
2022-03-16
華納雲：cdn和普通伺服器的區別在哪裡
2023-11-20
伺服器
Laravel 學習總結二：get () 和 first () 的區別、@each () 的用法和新增外來鍵約束
2020-06-20
Laravel
2>/dev/null和>/dev/null 2>&1和2>&1>/dev/null的區別
2020-08-25
devNull
找工作學習筆記1------=和==、&和&&、|和||的區別
2017-02-12
筆記
history.back(-1)和history.go(-1)區別
2018-06-03
Go
select count(*)和select count(1)的區別
2017-07-06
../和./和/的區別
2019-03-04
RAID 1+0和RAID 0+1的區別
2010-08-22
AI
HTML 裡 img 元素的 src 和 srcset 屬性有何區別？
2023-05-16
HTML

NgRx 裡 first 和 take(1) 操作符的區別

相關文章