角度 useFactory 返回模块中的异步函数

Question

我试图弄清楚如何在 Angular 11 中使用useFactory作为异步函数。现在我有这个：

import { ApolloClientOptions } from 'apollo-client';
import { FirebaseService } from './firebase.service';
// other imports here...

export async function createApollo(httpLink: HttpLink, fs: FirebaseService): Promise<ApolloClientOptions<any>> {

  const token = await fs.getToken();

  const getHeaders = async () => {
    return {
      "X-Auth-Token": token,
    };
  };

  // functions has more content here...

  return Promise.resolve({
    link: errorLink.concat(link),
    cache: new InMemoryCache(),
  });
}

@NgModule({
  imports: [HttpLinkModule],
  providers: [
    {
      provide: APOLLO_OPTIONS,
      useFactory: createApollo,
      deps: [HttpLink, FirebaseService],
    },
  ],
})
export class DgraphModule { }

问题是它解析了异步函数，但不是在返回之前解析的。我在 StackOverFlow 上看到其他一些帖子来解决这个问题，但他们最终忽略了函数的异步部分。你不能有一个不在异步函数中的等待，所以我在这里没有注意到。

如果该函数不是异步函数，您也不能将异步函数放入异步函数中...那么我在这里该怎么办？

更新：2/11/21 - 据此，有一种方法可以使用 执行此操作PlatformBrowserDynamic()，但我不明白如何在我的模块中实现它。

更新：2/13/21这是codeandbox.io的链接- 忽略缺少 html 或工作端点，但您可以查看该模块并将其更改为函数async以查看是否存在Invariant Violation错误。---> 确保查看 codeandsandbox 控制台是否有错误。

Answer 1

您不能在依赖项注入中使用异步工厂函数，因为它不受支持。有一个内置功能可以帮助您解决此问题，称为应用程序初始值设定项。您可以使用内置的APP_INITIALIZER令牌在依赖项注入中注册应用程序初始值设定项。该令牌需要一个工厂，该工厂将返回一个函数，该函数将作为应用程序初始值设定项调用，并且可以返回一个承诺。该应用程序初始值设定项在应用程序启动时调用，并且应用程序在全部完成后才会启动。对于你的情况，我认为这是可以的，因为你阅读了某种配置。不幸的是，据我所知，没有关于此的良好官方文档。如果您搜索，您会发现一些有关该主题的文章。这是另一个堆栈溢出问题的链接，对此进行了解释。要在您的情况下使用这种方法，我认为最好创建一个执行初始化然后保存该值的服务。

@Injectable()
export class ApolloOptionsService {
  public apolloOptions: any;

  constructor(private httpLink: HttpLink) {}

  public createApollo() {
    const token = "";

    const getHeaders = async () => {
      return {
        "X-Auth-Token": token
      };
    };

    const http = ApolloLink.from([
      setContext(async () => {
        return {
          headers: await getHeaders()
        };
      }),
      this.httpLink.create({
        uri: `https://${endpoint}`
      })
    ]);

    // Create a WebSocket link:
    const ws = new WebSocketLink({
      uri: `wss://${endpoint}`,
      options: {
        reconnect: true,
        connectionParams: async () => {
          return await getHeaders();
        }
      }
    });

    const link = split(
      // split based on operation type
      ({ query }) => {
        const definition = getMainDefinition(query);
        return (
          definition.kind === "OperationDefinition" &&
          definition.operation === "subscription"
        );
      },
      ws,
      http
    );
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          link: link,
          cache: new InMemoryCache()
        });
      }, 5000);
    }).then((apoloOptions) => (this.apolloOptions = apoloOptions));
  }
}

正如您所看到的，我还在承诺中添加了延迟，以模拟它稍后完成。现在让我们也更改您的模块以使用应用程序初始值设定项。

export function createApollo(apolloOptionsService: ApolloOptionsService) {
  return () => apolloOptionsService.createApollo();
}

export function getApolloOptions(apolloOptionsService: ApolloOptionsService) {
  return apolloOptionsService.apolloOptions;
}

@NgModule({
  imports: [HttpLinkModule],
  providers: [
    ApolloOptionsService,
    {
      provide: APP_INITIALIZER,
      useFactory: createApollo,
      deps: [ApolloOptionsService],
      multi: true
    },
    {
      provide: APOLLO_OPTIONS,
      useFactory: getApolloOptions,
      deps: [ApolloOptionsService]
    }
  ]
})
export class GraphQLModule {}

如您所见，我们使用一个工厂函数来创建应用程序初始化时调用的应用程序初始化函数。需要另一个工厂函数来从服务读取初始化值并将其作为APOLLO_OPTIONS令牌提供。因为初始化程序在应用程序启动之前运行，所以值在使用之前就已准备好。

我还创建了您的codesandbox 的一个分支，您可以在其中看到它的实际效果。