首頁 > web前端 > js教程 > 遷移訂閱回呼以訂閱 RxJS 中的參數

遷移訂閱回呼以訂閱 RxJS 中的參數

Susan Sarandon
發布: 2025-01-09 20:29:48
原創
520 人瀏覽過

Migrando subscribe Callbacks para subscribe arguments no RxJS

日常生活中使用 rxjs 的你可能已經注意到,從 6.4 版本開始。 RxJS 在 subscribe:

方法中放置了一個已棄用的註釋

@deprecated — 使用觀察者參數,而不是傳遞單獨的回呼參數。採用單獨回呼參數的簽名將在 v8 中刪除。詳細資訊:https://rxjs.dev/deprecations/subscribe-arguments

理由是使用單獨的回呼會導致方法的讀取效果更差,因此最好使用訂閱參數,解構方法傳回的屬性。

為了更好地理解這在實踐中是什麼樣子,讓我們來看一個簡單的例子:

data.js

import { Observable } from "rxjs";

/**
 * Cria um observable que emite valores numéricos de 1 até 5, e então se finaliza.
 *
 * @returns {Observable<number>} Um observable que emite números de 1 até 5 em sequência.
 */
export const data = () => {
  return new Observable((observer) => {
    for (let i = 1; i <= 5; i++) {
      observer.next(i);
    }

    observer.complete();
  });
};

/**
 * Cria um observable que emite um error imediatamente
 *
 * @returns {Observable<never>} Um observable que emite um erro.
 */
export const dataWithError = () => {
  return new Observable((observer) => {
    observer.error("Aconteceu um erro!");
  });
};

登入後複製

這將是我們的基本文件。第一個方法使用 .next() 方法按順序輸出從 1 到 5 的數字,一旦循環完成,就使用 .complete() 方法完成可觀察的操作。

第二種方法建立一個立即拋出錯誤的可觀察物件

PS:當呼叫 .error() 方法時,observable 停止發出值,並且無法透過 .next() 繼續發出值或使用 .complete() 完成。

讓我們進入正題吧。

我們將使用目前已棄用的方式作為第一個範例,然後我將展示如何使用 observable 參數。

import { data, dataWithError } from "./data.js";

data().subscribe(
  (value) => console.log(value),
  (error) => {},
  () => {
    console.log("completou");
  }
);

dataWithError().subscribe(
  () => {},
  (error) => {
    console.error({ error });
  }
);

登入後複製

請注意,因為它是一個範例,所以更明顯,但同時,我們需要知道每個回呼的順序(next、error 和complete)。

也就是說,讓我們來看看如何使用參數 observables:

import { data, dataWithError } from "./data.js";

data().subscribe({
  next: (data) => console.log(data),
  complete: () => console.log("completou"),
});

dataWithError()
    .subscribe({ error: (error) => console.error({ error })
    });
登入後複製

從這一點開始,透過參數 observables,我們可以更清楚地了解我們在 subscribe 方法中使用的內容,不需要聲明我們不會使用的回調或參數。

這是一個易於執行的遷移,並且不會在您的程式碼中留下此 API 的棄用訊息。

以上是遷移訂閱回呼以訂閱 RxJS 中的參數的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板