不推荐使用 forkJoin：不推荐使用 resultSelector，而是使用管道映射答案

【问题标题】：forkJoin is deprecated: resultSelector is deprecated, pipe to map instead不推荐使用 forkJoin：不推荐使用 resultSelector，而是使用管道映射
【发布时间】：2019-02-28 09:43:36
【问题描述】：

我正在开发一个 Angular 6 项目。

运行 ng lint 会给出以下警告：

“不推荐使用forkJoin：不推荐使用resultSelector，改为使用管道映射”

 forkJoin(...observables).subscribe(

有什么想法吗？似乎找不到有关此弃用的任何信息。

我刚刚使用 Angular CLI：6.1.5 生成了一个全新的 Angular 应用程序“ng new forkApp”

来源：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { forkJoin } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'forkApp';

  constructor(private http: HttpClient) {}

  ngOnInit() {
    console.log('ngOnInit...');

    const obs = [];
    for (let i = 1; i < 4; i++) {

      const ob = this.http.get('https://swapi.co/api/people/' + i);
      obs.push(ob);

    }

    forkJoin(...obs)
      .subscribe(
        datas => {
          console.log('received data', datas);
        }
      );

  }
}

package.json 文件中的“依赖项”部分：

  "dependencies": {
    "@angular/animations": "^6.1.0",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/router": "^6.1.0",
    "core-js": "^2.5.4",
    "rxjs": "^6.0.0",
    "zone.js": "~0.8.26"
  },

一旦完成所有三个 GET 请求，我就会在“datas”数组中获取所有数据。问题是，一旦我运行：ng lint 我得到了这个：

C:\forkApp>ng lint

警告：C:/forkApp/src/app/app.component.ts[26, 5]: forkJoin 是不推荐使用：不推荐使用 resultSelector，改为使用管道映射

【问题讨论】：

当我谷歌 'angular 6 forkjoin depretricated' metaltoad.com/blog/angular-6-upgrading-api-calls-rxjs-6 时的第一个链接。这是 rxjs github 的链接，执行 ctrl + f 'forkjoin' ，您将看到警告 github.com/ReactiveX/rxjs/blob/master/docs_app/content/guide/v6/… 建议的管道场景
我已经在使用 rxjs6 和 angular6 所以没有什么像： Observable.forkJoin( -> 被转换成 forkJoin( 我的导入也是这样的： import { forkJoin } from 'rxjs'; 和项目没有使用rxjs-compat, package.json("rxjs": "^6.2.2",)
@rhavelka：那个管道是新的，会检查一下，谢谢反馈
请发布整个代码，包括导入。对于rxjs，它们非常重要
@undefinedMayNotBeNull 刚刚用完整源代码更新了我的问题。如果您需要任何其他信息，请告诉我，感谢您的反馈。

标签： angular rxjs6

【解决方案1】：

forkJoin 应该可以工作。您使用的是哪个rxjs 版本？最新版本应该这样做：

import { of, combineLatest, forkJoin } from 'rxjs';
import { map, mergeAll } from 'rxjs/operators';

这里是工作代码：

import { of, forkJoin } from 'rxjs';

const observables = [of('hi'), of('im an'), of('observable')];

const joint = forkJoin(observables);

joint.subscribe(
  s => console.log(s) 
)

应该输出：

[“嗨”、“我是”、“可观察的”]

我尝试复制此内容，但没有看到任何警告：

https://stackblitz.com/edit/angular-v4nq3h?file=src%2Fapp%2Fapp.component.ts

【讨论】：

运行你的 sn-p 看起来 map 是用 forkJoin 为每个值调用的
是使用 forkJoin 作为单独导入还是直接在 observable 上加入？
确保使用最新的导入样式：import { forkJoin } from 'rxjs';
我也收到与 forkJoin + pipe + map 方式相同的警告

【解决方案2】：

我可以通过去掉省略号来解决这个问题：

forkJoin(observables).subscribe();

只要observables 已经是一个数组，它应该有相同的结果。

【讨论】：

谢谢，删除三个点解决了警告。 forkJoin(...obs) 变成了 forkJoin(obs)。

【解决方案3】：

根据 forkJoin.d.js ，不推荐使用 forkJoin(...args) ，您可以编写其他方式。对于您的源代码，由于您已经有一个相同类型的数组，只需传递您的数组即可。

//forkJoin.d.js
import { Observable } from '../Observable';
import { ObservableInput } from '../types';
export declare function forkJoin<T>(sources: [ObservableInput<T>]): Observable<T[]>;
export declare function forkJoin<T, T2>(sources: [ObservableInput<T>, ObservableInput<T2>]): Observable<[T, T2]>;
export declare function forkJoin<T, T2, T3>(sources: [ObservableInput<T>, ObservableInput<T2>, ObservableInput<T3>]): Observable<[T, T2, T3]>;
export declare function forkJoin<T, T2, T3, T4>(sources: [ObservableInput<T>, ObservableInput<T2>, ObservableInput<T3>, ObservableInput<T4>]): Observable<[T, T2, T3, T4]>;
export declare function forkJoin<T, T2, T3, T4, T5>(sources: [ObservableInput<T>, ObservableInput<T2>, ObservableInput<T3>, ObservableInput<T4>, ObservableInput<T5>]): Observable<[T, T2, T3, T4, T5]>;
export declare function forkJoin<T, T2, T3, T4, T5, T6>(sources: [ObservableInput<T>, ObservableInput<T2>, ObservableInput<T3>, ObservableInput<T4>, ObservableInput<T5>, ObservableInput<T6>]): Observable<[T, T2, T3, T4, T5, T6]>;
export declare function forkJoin<T>(sources: Array<ObservableInput<T>>): Observable<T[]>;
export declare function forkJoin<T>(v1: ObservableInput<T>): Observable<T[]>;
export declare function forkJoin<T, T2>(v1: ObservableInput<T>, v2: ObservableInput<T2>): Observable<[T, T2]>;
export declare function forkJoin<T, T2, T3>(v1: ObservableInput<T>, v2: ObservableInput<T2>, v3: ObservableInput<T3>): Observable<[T, T2, T3]>;
export declare function forkJoin<T, T2, T3, T4>(v1: ObservableInput<T>, v2: ObservableInput<T2>, v3: ObservableInput<T3>, v4: ObservableInput<T4>): Observable<[T, T2, T3, T4]>;
export declare function forkJoin<T, T2, T3, T4, T5>(v1: ObservableInput<T>, v2: ObservableInput<T2>, v3: ObservableInput<T3>, v4: ObservableInput<T4>, v5: ObservableInput<T5>): Observable<[T, T2, T3, T4, T5]>;
export declare function forkJoin<T, T2, T3, T4, T5, T6>(v1: ObservableInput<T>, v2: ObservableInput<T2>, v3: ObservableInput<T3>, v4: ObservableInput<T4>, v5: ObservableInput<T5>, v6: ObservableInput<T6>): Observable<[T, T2, T3, T4, T5, T6]>;
/** @deprecated resultSelector is deprecated, pipe to map instead */
export declare function forkJoin(...args: Array<ObservableInput<any> | Function>): Observable<any>;
export declare function forkJoin<T>(...sources: ObservableInput<T>[]): Observable<T[]>;

【讨论】：

【解决方案4】：

这给出了这个警告：

不推荐使用forkJoin：使用接受数组的版本改为 Observables（弃用）

 forkJoin(this.getProfile(), this.getUserFirstName(), this.getUserLastName())
      .subscribe(([res1, res2, res3]) => {
        this.OnboardingUser = res1;
        this.userFirstName = res2;
        this.userLastName = res3;
      }, err => { console.log(err); });

我已将其更改为：即添加[]

 forkJoin([this.getProfile(), this.getUserFirstName(), this.getUserLastName()])
      .subscribe(([res1, res2, res3]) => {
        this.OnboardingUser = res1;
        this.userFirstName = res2;
        this.userLastName = res3;
      }, err => { console.log(err); });

【讨论】：

【解决方案5】：

forkJoin(observable1, observable2)   // WORKING - deprecation warning
(memberObservables) => forkJoin(memberObservables)) // warning, too
forkJoin([observable1, observable2]) // WORKING - no warning
(memberObservables: Array<any>) => forkJoin(memberObservables)) // no warning

【讨论】：

它帮助了我，但为什么呢？请解释一下好吗？

【解决方案6】：

这是因为 RXJS 团队将弃用警告放在文件顶部。

 import { Observable } from '../Observable';
import { ObservableInput, ObservedValueOf, ObservedValuesFromArray, SubscribableOrPromise } from '../types';

/** @deprecated Use the version that takes an array of Observables instead */
export declare function forkJoin<T>(v1: SubscribableOrPromise<T>): Observable<[T]>;
/** @deprecated Use the version that takes an array of Observables instead */
export declare function forkJoin<T, T2>(v1: ObservableInput<T>, v2: ObservableInput<T2>): Observable<[T, T2]>;
/** @deprecated Use the version that takes an array of Observables instead */
export declare function forkJoin<T, T2, T3>(v1: ObservableInput<T>, v2: ObservableInput<T2>, v3: ObservableInput<T3>): Observable<[T, T2, T3]>;
/** @deprecated Use the version that takes an array of Observables instead */
export declare function forkJoin<T, T2, T3, T4>(v1: ObservableInput<T>, v2: ObservableInput<T2>, v3: ObservableInput<T3>, v4: ObservableInput<T4>): Observable<[T, T2, T3, T4]>;
/** @deprecated Use the version that takes an array of Observables instead */
export declare function forkJoin<T, T2, T3, T4, T5>(v1: ObservableInput<T>, v2: ObservableInput<T2>, v3: ObservableInput<T3>, v4: ObservableInput<T4>, v5: ObservableInput<T5>): Observable<[T, T2, T3, T4, T5]>;
/** @deprecated Use the version that takes an array of Observables instead */
export declare function forkJoin<T, T2, T3, T4, T5, T6>(v1: ObservableInput<T>, v2: ObservableInput<T2>, v3: ObservableInput<T3>, v4: ObservableInput<T4>, v5: ObservableInput<T5>, v6: ObservableInput<T6>): Observable<[T, T2, T3, T4, T5, T6]>;
export declare function forkJoin<A>(sources: [ObservableInput<A>]): Observable<[A]>;
export declare function forkJoin<A, B>(sources: [ObservableInput<A>, ObservableInput<B>]): Observable<[A, B]>;
export declare function forkJoin<A, B, C>(sources: [ObservableInput<A>, ObservableInput<B>, ObservableInput<C>]): Observable<[A, B, C]>;
export declare function forkJoin<A, B, C, D>(sources: [ObservableInput<A>, ObservableInput<B>, ObservableInput<C>, ObservableInput<D>]): Observable<[A, B, C, D]>;
export declare function forkJoin<A, B, C, D, E>(sources: [ObservableInput<A>, ObservableInput<B>, ObservableInput<C>, ObservableInput<D>, ObservableInput<E>]): Observable<[A, B, C, D, E]>;
export declare function forkJoin<A, B, C, D, E, F>(sources: [ObservableInput<A>, ObservableInput<B>, ObservableInput<C>, ObservableInput<D>, ObservableInput<E>, ObservableInput<F>]): Observable<[A, B, C, D, E, F]>;
export declare function forkJoin<A extends ObservableInput<any>[]>(sources: A): Observable<ObservedValuesFromArray<A>[]>;
export declare function forkJoin(sourcesObject: {}): Observable<never>;
export declare function forkJoin<T, K extends keyof T>(sourcesObject: T): Observable<{
    [K in keyof T]: ObservedValueOf<T[K]>;
}>;
/** @deprecated resultSelector is deprecated, pipe to map instead */
export declare function forkJoin(...args: Array<ObservableInput<any> | Function>): Observable<any>;
/** @deprecated Use the version that takes an array of Observables instead */
export declare function forkJoin<T>(...sources: ObservableInput<T>[]): Observable<T[]>;

【讨论】：

尽管进行了修复，但我仍然看到警告。感谢您提及这个问题。

【解决方案7】：

为我工作 --- > forkJoin([observable1, observable2]) > 工作 - 没有警告

例如-

forkJoin([this.commonApiService.masterGetCall(END_POINT.NO_OF_WHEELS_MASTER),
    this.commonApiService.masterGetCall(END_POINT.BASE_LOCATION), this.commonApiService.masterGetCall(END_POINT.VEHICLE_TYPE_MASTER), this.commonApiService.masterGetCall(END_POINT.FUEL_TYPE_MASTER)])
      .subscribe(([call1Response, call2Response, call3Response, call4Response]) => {
        this.wheels = call1Response.data;
        this.baseLocation = call2Response.data;
        this.vehicleType = call3Response.data;
        this.fuelType = call4Response.data;
        console.log(
          call1Response, call2Response, call3Response, call4Response
        );
        this.generalService.hideLoader()
      })

【讨论】：

你为这个函数写了单元测试吗？