javascript - 如何将 Promise 方法转换为 Angular 10 中的 rxjs Observables

Question

我是打字稿、角度和可观察的新手。我的问题是我有这个方法，它接受一个 URL 并返回该 URL 的图标。我如何使用可观察对象而不是承诺

 getFavIcon(url: string): Promise<any> {
      return new Promise((resolve, reject) => {
        const hostname = this.getDomain(url);
        const src = 'http://' + hostname + '/favicon.ico';

        const image = new Image();
        image.onerror = () => {
            reject({ hasFavourite: false });

        };
        image.onload = () => {
            resolve({ hasFavourite: true, imageURL: src});
        };
        image.src = src;
      });
  }

标签： javascriptangulartypescriptrxjsobservable

Answer 1

它的创建与 Promise 非常相似，除了 observable 可以是一个连续流并且你complete()让它表现得像 Promise

 getFavIcon(url: string): Promise<any> {
      return new Observable((obs) => {
        const hostname = this.getDomain(url);
        const src = 'http://' + hostname + '/favicon.ico';

        const image = new Image();
        image.onerror = () => {
            obs.error({ hasFavourite: false });

        };
        image.onload = () => {
            obs.next({ hasFavourite: true, imageURL: src});
            obs.complete()
        };
        image.src = src;
      });
  }