Rxjs常用operators

来源:https://www.cnblogs.com/xzsty/archive/2019/01/02/10207504.html
-Advertisement-
Play Games

最近項目不太忙,有時間系統學習了一下rxjs的一些知識,將其中個人認為比較常用的一些操作符mark下來,分享學習 ...


本文使用的是angular6內置的rxjs,版本號為6.3.3

concat

通過順序地發出多個 Observables 的值將它們連接起來,一個接一個的。

參數:

名稱 類型 屬性 描述
other ObservableInput 等待被連接的 Observable。 可以接受多個輸入 Observable。
scheduler Scheduler 可選的,預設值: null 可選的調度器,控制每個輸入 Observable 的訂閱。
const timer1 = interval(1000).pipe(take(10));
    const timer2 = interval(2000).pipe(take(6));
    const timer3 = interval(500).pipe(take(10));
    const result = timer1.pipe(concat(timer2, timer3), toArray());
    result.subscribe(x => console.log(x));
    // 將Observable轉換為數組之後的結果
    [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

count

計算源的發送數量,並當源完成時發出該數值。

當源完成的時候,告知總共發送了多少個值。

參數:

名稱 類型 屬性 描述
predicate function(value: T, i: number, source: Observable): boolean 可選的 A boolean 函數,用來選擇哪些值會被計數。 參數如下:value: 來自源的值;index: 來自投射的 Observable 的值的 "index"(從0開始);source: 源 Observable 自身實例。
// 記錄1到7之間有幾個奇數
const numbers = range(1, 7);
numbers.pipe(count(i => i % 2 === 1))
.subscribe(x => console.log(x));
// 結果
// 4

// 返回數組的長度
const arr = [12, 9, 2, 21, 11];
from(arr).pipe(count(x => true))
.subscribe(x => console.log(x));
// 結果
// 5

delay

通過給定的超時或者直到一個給定的時間來延遲源 Observable 的發送。

每個數據項的發出時間都往後推移固定的毫秒數.

如果延時參數是數字, 這個操作符會將源 Observable 的發出時間都往後推移固定的毫秒數。 保存值之間的相對時間間隔.

如果延遲參數是日期類型, 這個操作符會延時Observable的執行直到到了給定的時間.

參數:

名稱 類型 屬性 描述
delay number或Date 延遲時間(以毫秒為單位的數字)或 Date 對象(發送延遲到這個時間點)。
scheduler Scheduler 可選的,預設值: async 調度器,用來管理處理每項時延的定時器。
// 每次點擊延遲1秒
var clicks = Rx.Observable.fromEvent(document, 'click');
var delayedClicks = clicks.delay(1000); // each click emitted after 1 second
delayedClicks.subscribe(x => console.log(x));
// 延時所有的點擊直到到達未來的時間點
var clicks = Rx.Observable.fromEvent(document, 'click');
var date = new Date('March 15, 2050 12:00:00'); // in the future
var delayedClicks = clicks.delay(date); // click emitted only after that date
delayedClicks.subscribe(x => console.log(x));

distinct

可以用來做數組去重

返回 Observable,它發出由源 Observable 所發出的所有與之前的項都不相同的項。

如果提供了 keySelector 函數,那麼它會將源 Observable 的每個值都投射成一個新的值,這個值會用來檢查是否與先前投射的值相等。如果沒有提供 keySelector 函數,它會直接使用源 Observable 的每個值來檢查是否與先前的值相等。

const arr = [1, 1, 2, 2, 2, 1, 2, 3, 4, 3, 2, 1];
from(arr).pipe(distinct(), toArray())
  .subscribe(x => console.log(x));
  // 結果
  // [1, 2, 3, 4]
  
// 對象數組
const arr1 = [{ age: 4, name: 'Foo' },
{ age: 7, name: 'Bar' },
{ age: 5, name: 'Foo' }];
from(arr1).pipe(distinct(item => item.name), toArray())
  .subscribe(x => console.log(x));
  // 結果
  // [{ age: 4, name: 'Foo' },
{ age: 7, name: 'Bar' }]

every

功能類似於lodash的every

返回的 Observable 發出是否源 Observable 的每項都滿足指定的條件。

參數:

名稱 類型 屬性 描述
predicate function 用來確定每一項是否滿足指定條件的函數。
thisArg any 可選的 可選對象,作為回調函數中的 this 使用。
const users = [
  { 'user': 'barney', 'age': 36, 'active': false },
  { 'user': 'fred', 'age': 40, 'active': false }
];
from(users).pipe(
  every(item => !item.active)
)
  .subscribe(x => console.log(x));
  // 結果
  // true
  
from(users).pipe(
  every(item => item.user === 'barney' && item.active === false)
)
  .subscribe(x => console.log(x));
  // 結果
  // false

filter

通過只發送源 Observable 的中滿足指定 predicate 函數的項來進行過濾。

類似於 Array.prototype.filter(), 它只會發出源 Observable 中符合標準函數的值。

參數:

名稱 類型 屬性 描述
predicate function(value: T, index: number): boolean 評估源 Observable 所發出的每個值的函數。如果它返回 true,就發出值,如果是 false 則不會傳給輸出 Observable 。index 參數是自訂閱開始後發送序列的索引,是從 0 開始的。
thisArg any 可選的 可選參數,用來決定 predicate 函數中的 this 的值。
const users = [
  { 'user': 'barney', 'age': 36, 'active': false },
  { 'user': 'fred', 'age': 40, 'active': true },
  { 'user': 'ckdf', 'age': 24, 'active': false },
  { 'user': 'gdfg', 'age': 31, 'active': false }
];
from(users).pipe(
  filter(item => item.active)
)
  .subscribe(x => console.log(x));
  // 結果
  // {user: "fred", age: 40, active: true}

find

只發出源 Observable 所發出的值中第一個滿足條件的值。

找到第一個通過測試的值並將其發出。

參數:

名稱 類型 屬性 描述
predicate function(value: T, index: number, source: Observable): boolean 使用每項來調用的函數,用於測試是否符合條件。
thisArg any 可選的 可選參數,用來決定 predicate 函數中的 this 的值。
const users = [
  { 'user': 'barney', 'age': 36, 'active': true },
  { 'user': 'fred', 'age': 40, 'active': true },
  { 'user': 'ckdf', 'age': 24, 'active': false },
  { 'user': 'gdfg', 'age': 31, 'active': false }
];

from(users).pipe(
  find(item => item.active)
)
  .subscribe(x => console.log(x));
  // 結果
  // {user: "barney", age: 36, active: true}

findIndex

只發出源 Observable 所發出的值中第一個滿足條件的值的索引。

它很像 find , 但發出的是找到的值的索引, 而不是值本身。

參數:

名稱 類型 屬性 描述
predicate function(value: T, index: number, source: Observable): boolean 使用每項來調用的函數,用於測試是否符合條件。
thisArg any 可選的 可選參數,用來決定 predicate 函數中的 this 的值。
const users = [
  { 'user': 'barney', 'age': 36, 'active': false },
  { 'user': 'fred', 'age': 40, 'active': true },
  { 'user': 'ckdf', 'age': 24, 'active': false },
  { 'user': 'gdfg', 'age': 31, 'active': false }
];

from(users).pipe(
  findIndex(item => item.active)
)
  .subscribe(x => console.log(x));
  // 結果
  // 1

first

只發出由源 Observable 所發出的值中第一個(或第一個滿足條件的值)。

只發出第一個值。或者只發出第一個通過測試的值。

參數:

名稱 類型 屬性 描述
predicate function(value: T, index: number, source: Observable): boolean 可選的 使用每項來調用的函數,用於測試是否符合條件。
resultSelector function(value: T, index: number): R 可選的 函數,它基於源 Observable 的值和索引來生成輸出 Observable 的值。傳給這個函數的參數有:value: 在源 Observable 上發出的值。index: 源值的索引。
defaultValue R 可選的 假如在源 Observable 上沒有找到有效值,就會發出這個 預設值。
const users = [
  { 'user': 'barney', 'age': 36, 'active': false },
  { 'user': 'fred', 'age': 40, 'active': true },
  { 'user': 'ckdf', 'age': 24, 'active': false },
  { 'user': 'gdfg', 'age': 31, 'active': false }
];
from(users).pipe(
  first(item => item.active)
)
  .subscribe(x => console.log(x));
  // 結果
  // {user: "fred", age: 40, active: true}
  
from(users).pipe(
first()
)
.subscribe(x => console.log(x));
// 結果
// {user: "barney", age: 36, active: false}

isEmpty

如果源 Observable 是空的話,它返回一個發出 true 的 Observable,否則發出 false 。

const users = [
  { 'user': 'barney', 'age': 36, 'active': false },
  { 'user': 'fred', 'age': 40, 'active': true },
  { 'user': 'ckdf', 'age': 24, 'active': false },
  { 'user': 'gdfg', 'age': 31, 'active': false }
];
from(users).pipe(
  isEmpty()
)
  .subscribe(x => console.log(x));
  // 結果
  // false

last

返回的 Observable 只發出由源 Observable 發出的最後一個值。它可以接收一個可選的 predicate 函數作為 參數,如果傳入 predicate 的話則發送的不是源 Observable 的最後一項,而是發出源 Observable 中 滿足 predicate 函數的最後一項。

const users = [
  { 'user': 'barney', 'age': 36, 'active': false },
  { 'user': 'fred', 'age': 40, 'active': true },
  { 'user': 'ckdf', 'age': 24, 'active': true },
  { 'user': 'gdfg', 'age': 31, 'active': false }
];
from(users).pipe(
  last(item => item.active)
)
  .subscribe(x => console.log(x));
  // 結果
  // {user: "ckdf", age: 24, active: true}

map

將給定的 project 函數應用於源 Observable 發出的每個值,並將結果值作為 Observable 發出。

類似於 Array.prototype.map(), 它把每個源值傳遞給轉化函數以獲得相應的輸出值。

參數:

名稱 類型 屬性 描述
project function(value: T, index: number): R 應用於由源 Observable 所發出的每個值的函數。index 參數是自訂閱開始後發送序列的索引,是從 0 開始的。
thisArg any 可選的 可選參數,定義在 project 函數中的 this 是什麼。
const users = [
  { 'user': 'barney', 'age': 36, 'active': false },
  { 'user': 'fred', 'age': 40, 'active': true },
  { 'user': 'ckdf', 'age': 24, 'active': true },
  { 'user': 'gdfg', 'age': 31, 'active': false }
];
from(users).pipe(
  map(item => 'hello' + item.user),
  toArray()
)
  .subscribe(x => console.log(x));
  // 結果
  // ["hellobarney", "hellofred", "hellockdf", "hellogdfg"]

mapTo

每次源 Observble 發出值時,都在輸出 Observable 上發出給定的常量值。

類似於 map,但它每一次都把源值映射成同一個輸出值。

參數:

名稱 類型 屬性 描述
value any 將每個源值映射成的值。
const users = [
  { 'user': 'barney', 'age': 36, 'active': false },
  { 'user': 'fred', 'age': 40, 'active': true },
  { 'user': 'ckdf', 'age': 24, 'active': true },
  { 'user': 'gdfg', 'age': 31, 'active': false }
];
from(users).pipe(
  mapTo('hello'),
  toArray()
)
  .subscribe(x => console.log(x));
  // 結果
  // ["hello", "hello", "hello", "hello"]

max

max 操作符操作的 Observable 發出數字(或可以與提供的函數進行比較的項)並且當源 Observable 完成時它發出單一項:最大值的項。

參數:

名稱 類型 屬性 描述
comparer Function 可選的 可選的比較函數,用它來替代預設值來比較兩項的值。
const users = [
  { 'user': 'barney', 'age': 36, 'active': false },
  { 'user': 'fred', 'age': 40, 'active': true },
  { 'user': 'ckdf', 'age': 24, 'active': true },
  { 'user': 'gdfg', 'age': 31, 'active': false }
];
from(users).pipe(
  max((a, b) => a.age < b.age ? -1 : 1)
)
  .subscribe(x => console.log(x));
  // 結果
  // {user: "fred", age: 40, active: true}

merge

創建一個輸出 Observable ,它可以同時發出每個給定的輸入 Observable 中的所有值。

通過把多個 Observables 的值混合到一個 Observable 中 來將其打平。

const users = [
  { 'user': 'barney', 'age': 36, 'active': false },
  { 'user': 'fred', 'age': 40, 'active': true },
  { 'user': 'ckdf', 'age': 24, 'active': true },
  { 'user': 'gdfg', 'age': 31, 'active': false }
];
from(users).pipe(
  merge(interval(1000)),
  take(10),
  toArray()
)
  .subscribe(x => console.log(x));
  // 結果
  // [
      { 'user': 'barney', 'age': 36, 'active': false },
      { 'user': 'fred', 'age': 40, 'active': true },
      { 'user': 'ckdf', 'age': 24, 'active': true },
      { 'user': 'gdfg', 'age': 31, 'active': false },
      0,
      1,
      2,
      3,
      4,
      5
    ];

min

min 操作符操作的 Observable 發出數字(或可以使用提供函數進行比較的項)並且當源 Observable 完成時它發出單一項:最小值的項。

參數:

名稱 類型 屬性 描述
comparer Function 可選的 可選的比較函數,用它來替代預設值來比較兩項的值。
const users = [
  { 'user': 'barney', 'age': 36, 'active': false },
  { 'user': 'fred', 'age': 40, 'active': true },
  { 'user': 'ckdf', 'age': 24, 'active': true },
  { 'user': 'gdfg', 'age': 31, 'active': false }
];
from(users).pipe(
  min((a, b) => a.age < b.age ? -1 : 1)
)
  .subscribe(x => console.log(x));
  // 結果
  // {user: "ckdf", age: 24, active: true}

reduce

在源 Observalbe 上應用 accumulator (累加器) 函數,然後當源 Observable 完成時,返回 累加的結果,可以提供一個可選的 seed 值。

使用 accumulator (累加器) 函數將源 Observable 所發出的所有值歸併在一起, 該函數知道如何將新的源值納入到過往的累加結果中。

參數:

名稱 類型 屬性 描述
accumulator function(acc: R, value: T, index: number): R 調用每個 源值的累加器函數。
seed R 可選的 初始累加值。
const arr = [1, 2, 3, 4];
from(arr).pipe(
  reduce((acc, curr) => acc + curr, 0)
)
  .subscribe(x => console.log(x));
  // 結果
  // 10

repeat

返回的 Observable 重覆由源 Observable 所發出的項的流,最多可以重覆 count 次。

參數:

名稱 類型 屬性 描述
count number 可選的 源 Observable 項重覆的次數,如果 count 為0則產生一個空的 Observable 。
const arr = [1, 2, 3, 4];
from(arr).pipe(
  repeat(3),
  toArray()
)
  .subscribe(x => console.log(x));
  // 結果
  // [1, 2, 3, 4, 1, 2, 3, 4, 1, 2, 3, 4]

startWith

返回的 Observable 會先發出作為參數指定的項,然後再發出由源 Observable 所發出的項。

參數:

名稱 類型 屬性 描述
values ...T 你希望修改過的 Observable 可以先發出的項。
scheduler Scheduler 可選的 用於調度 next 通知發送的 IScheduler 。
const users = [
  { 'user': 'barney', 'age': 36, 'active': false },
  { 'user': 'fred', 'age': 40, 'active': true },
  { 'user': 'ckdf', 'age': 24, 'active': true },
  { 'user': 'gdfg', 'age': 31, 'active': false }
];
from(users).pipe(
  startWith({ 'user': 'jokl', 'age': 28, 'active': false }),
  toArray()
)
  .subscribe(x => console.log(x));
  // 結果
  //[
      { 'user': 'jokl', 'age': 28, 'active': false },
      { 'user': 'barney', 'age': 36, 'active': false },
      { 'user': 'fred', 'age': 40, 'active': true },
      { 'user': 'ckdf', 'age': 24, 'active': true },
      { 'user': 'gdfg', 'age': 31, 'active': false }
    ]

take

只發出源 Observable 最初發出的的N個值 (N = count)。

接收源 Observable 最初的N個值 (N = count),然後完成。

參數:

名稱 類型 屬性 描述
count number 發出 next 通知的最大次數。
const users = [
  { 'user': 'barney', 'age': 36, 'active': false },
  { 'user': 'fred', 'age': 40, 'active': true },
  { 'user': 'ckdf', 'age': 24, 'active': true },
  { 'user': 'gdfg', 'age': 31, 'active': false }
];
from(users).pipe(
  startWith({ 'user': 'jokl', 'age': 28, 'active': false }),
  take(3),
  toArray()
)
  .subscribe(x => console.log(x));
  // 結果
  //[
      { 'user': 'jokl', 'age': 28, 'active': false },
      { 'user': 'barney', 'age': 36, 'active': false },
      { 'user': 'fred', 'age': 40, 'active': true }
    ]

takeLast

只發出源 Observable 最後發出的的N個值 (N = count)。與take類似

記住源 Observable 的最後N個值 (N = count),然後只有當 它完成時發出這些值。

參數:

名稱 類型 屬性 描述
count number 從源 Observable 的值序列的末尾處,要發出的值的最大數量。
const users = [
  { 'user': 'barney', 'age': 36, 'active': false },
  { 'user': 'fred', 'age': 40, 'active': true },
  { 'user': 'ckdf', 'age': 24, 'active': true },
  { 'user': 'gdfg', 'age': 31, 'active': false }
];
from(users).pipe(
  startWith({ 'user': 'jokl', 'age': 28, 'active': false }),
  takeLast(3),
  toArray()
)
  .subscribe(x => console.log(x));
  // 結果
  //[
        { 'user': 'fred', 'age': 40, 'active': true },
        { 'user': 'ckdf', 'age': 24, 'active': true },
        { 'user': 'gdfg', 'age': 31, 'active': false }
    ]

toArray

將源 Observable轉換為數組

const arr = [1, 2, 3, 4];
from(arr).pipe(
  toArray()
)
  .subscribe(x => console.log(x));
  // 結果
  // [1, 2, 3, 4]

toPromise

將 Observable 序列轉換為符合 ES2015 標準的 Promise 。

const users = [
  { 'user': 'barney', 'age': 36, 'active': false },
  { 'user': 'fred', 'age': 40, 'active': true },
  { 'user': 'ckdf', 'age': 24, 'active': true },
  { 'user': 'gdfg', 'age': 31, 'active': false }
];
from(users).pipe(
  startWith({ 'user': 'jokl', 'age': 28, 'active': false }),
  takeLast(3),
  toArray()
)
  .toPromise()
  .then(x => console.log(x))
  .catch(err => console.log(err));
  // 結果
  //[
        { 'user': 'fred', 'age': 40, 'active': true },
        { 'user': 'ckdf', 'age': 24, 'active': true },
        { 'user': 'gdfg', 'age': 31, 'active': false }
    ]

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 在實際開發中,我們禁止縮放的實現方式: 1.meta設置: <meta name="viewport" content="width=device-width,height=device-height, initial-scale=1.0, maximum-scale=1.0, minimum-sc ...
  • 1.web前端開發,如何提高頁面性能優化? 2.前端開發中,如何優化圖像?圖像格式的區別? 3.Vue的雙向數據綁定原理是什麼? 4.請說下封裝 vue 組件的過程? 5.vue.cli中怎樣使用自定義的組件?有遇到過哪些問題嗎? ...
  • 1. 全局安裝vue cli 2. 初始化 vue ui 執行命令 2.1 該命令會自動打開你的瀏覽器,預設地址為: localhost:8000/project/select ,瀏覽器展示的頁面如下: 切換界面到創建,點擊下麵 在此創建新項目按鈕 2.2 2.3 上面的兩項不用管,是我之前創建過玩 ...
  • 1.var reg=/./ var reg=/\./ 前者代表任何一個字元,後者代表這個字元中得有一個 2.?的使用 如果單獨一個字元後面帶? var reg=/\d?/ /n?/ 代表一個或0個字元的出現 如果是量詞+和*,{2,}後面帶?取消正則的貪婪性 在捕獲階段 3.捕獲 1.普通捕獲 ex ...
  • (註:此文是在看過許多學習資料和視頻之後,加上自身理解拼湊而成,僅作學習之用。若有版權問題,麻煩及時聯繫) 標準頁面結構: Html發展歷史: 註:每一種HTML需要有對應的doctype聲明。 H5 <!doctype html> 無文檔聲明瀏覽器以怪異模式解析html Html標簽: 不使用ht ...
  • (1)盒模型(普通盒模型、怪異盒模型) 1、元素的content(內容)、padding(內邊距)、border(邊框)、margin(外邊距)構成了CSS盒模型 2、IE盒模型和W3C盒模型 1)IE盒模型是怪異模式下的盒模型,W3C盒模型是標準模式下的盒模型; 2)IE盒模型的width/hei ...
  • (1)Vue的生命周期 1)創建vue實例,初始化生命周期鉤子函數 2)數據檢測及方法和計算屬性代理。在數據檢測和初始化數據之前調用beforeCreated(),這時還獲取不到props或者data中的數據;數據、屬性、方法初始化之後,調用created(),可以訪問之前訪問不到的數據,但是組件還 ...
  • function getBrowserInfo() { var ua = navigator.userAgent.toLocaleLowerCase(); var browserType = null; if (ua.match(/msie/) != null || ua.match(/triden... ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...