使用实用程序编程接口

**注意：新的前台系统处于alpha阶段，只有少数插件支持。

所有通过已安装插件传递到应用程序中的实用 API 扩展都会被框架按正确顺序实例化和配置，然后可供使用。 您可以通过以下方式与这些实例进行交互。

通过 React 钩子

实用程序编程接口最常见的使用模式是调用useApi无论它最初是由核心框架还是插件提供的，这一点都适用。

import { useApi, configApiRef } from '@backstage/frontend-plugin-api';

const MyComponent = () => {
  const configApi = useApi(configApiRef);
  const title = configApi.getString('app.title');
  // ...
};

useApi钩子总是返回一个值，如果 API ref 无法解析为已注册的实现，则会抛出一个异常。 对于高级用例，如果您明确希望选择性地请求运行时可能已提供也可能未提供的实用程序编程接口，则可以使用底层的useApiHolder而不是钩子。

import { useApiHolder, configApiRef } from '@backstage/frontend-plugin-api';

const MyComponent = () => {
  const apis = useApiHolder();
  const configApi = apis.get(configApiRef); // may return undefined
  if (configApi) {
    const title = configApi.getString('app.title');
    // ...
  }
};

通过依赖关系

您的实用程序应用编程接口可以在其工厂中依赖于其他实用程序应用编程接口。 您可以通过声明deps您的createApiFactory并在您的factory.

import {
  configApiRef,
  createApiExtension,
  createApiFactory,
  discoveryApiRef,
} from '@backstage/frontend-plugin-api';
import { MyApiImpl } from './MyApiImpl';

const myApi = createApiExtension({
  factory: createApiFactory({
    api: myApiRef,
    deps: {
      configApi: configApiRef,
      discoveryApi: discoveryApiRef,
    },
    factory: ({ configApi, discoveryApi }) => {
      return new MyApiImpl({ configApi, discoveryApi });
    },
  }),
});

请注意deps部分基本上是将您选择的自由格式名称分配给 API 引用。 例如，我们在这里映射了configApiRef到名称configApi框架会确保所有这些部署都被实例化，并传递到您的factory函数的名称与您的deps到那时configApi是指该 API 的一个实际运行实例。